js定时器+简单的动画效果实例


Posted in Javascript onNovember 10, 2017

1.向下滑动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>向下滑动</title>
 <style>
  body {
   margin: 0px;
  }
  #show {
   width: 200px;
   /* 高度为 0 */
   height: 100px;
   background-color: lightcoral;
   margin: 0 auto;
   /* 设置为隐藏 */
   /*display: none;*/
  }

 </style>
</head>
<body>
<div id="show"></div>
<script>
 var show = document.getElementById('show');
 /*show.style.display = 'block';

 var t = setInterval(function(){
  var style = window.getComputedStyle(show,null);
  var height = parseInt(style.height);
  // 判断当前的高度是否为 400
  if (height >= 400){
   clearInterval(t);
  } else {
   height++;
   show.style.height = height + 'px';
  }
 },50);*/

 slideDown(show,400);

 /*
  将上述实现的向下滑动效果,封装在一个固定的函数中
  * 设计当前实现向下滑动效果函数的形参
   * elem - 表示实现向下滑动效果的元素
   * maxHeight - 表示元素向下滑动的最大高度值
  * 函数的逻辑与默认设置CSS样式属性的值无关
  */
 function slideDown(elem, maxHeight){
  // 操作的元素默认的display值为none
  elem.style.display = 'block';
  elem.style.height = '0px';

  var t = setInterval(function(){
   var style = window.getComputedStyle(elem,null);
   var height = parseInt(style.height);
   // 判断当前的高度是否为 400
   if (height >= maxHeight){
    clearInterval(t);
   } else {
    height++;
    elem.style.height = height + 'px';
   }
  },50);
 }


</script>
</body>
</html>

2.移动效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>移动效果</title>
  <style>
    body {
      margin: 0px;
    }
    #box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;

      position: absolute;
      left: 100px;
      top: 100px;
    }
  </style>
</head>
<body>
<div id="box"></div>
<script>
  var box = document.getElementById('box');
  box.onclick = function(){
    clearInterval(t);
  }
  /*
    * 向右移动
     * 当前元素移动到页面的最右边时 -> 向左移动
    * 向左移动
     * 当前元素移动到页面的最左边时 -> 向右移动
   */
  var flag = false;// 默认表示向右
  var speed = 1;// 表示每次变化的值
  t = setInterval(function(){
    //speed += 0.01;
    // 获取当前页面的宽度
    var WIDTH = window.innerWidth;
    var style = window.getComputedStyle(box,null);
    var left = parseInt(style.left);
    var width = parseInt(style.width);
    // 判断当前元素移动的方向
    if (flag){// 向左移动
      left -= speed;
    } else {// 向右移动
      left += speed;
    }
    // 判断什么情况下,向左移动;判断什么情况下,向右移动
    if ((left + width) >= WIDTH){// 向左移动
      flag = true;
    } else if (left <= 0){// 向右移动
      flag = false;
    }
    box.style.left = left + 'px';
  },10);

</script>
</body>
</html>

3.事件与动画结合

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件与动画结合</title>
  <style>
    body {
      margin: 0px;
    }
  </style>
</head>
<body>
<script>
  // 获取<body>元素
  var body = document.body;
  // 当页面加载完毕后,设置当前<body>元素的高度为当前浏览器窗口的高度
  window.onload = function(){
    setHeight(body);
  };
  // 当用户改变浏览器窗口的大小时,重新设置<body>元素的高度(等于当前窗口的高度)
  window.onresize = function(){
    setHeight(body);
  };
  // 定义函数 - 设置<body>元素的高度等于当前窗口的高度
  function setHeight(elem){
    elem.style.height = window.innerHeight + 'px';
  }

  var width = 100,height = 100;
  // 为<body>元素绑定click事件
  body.onclick = function(event){
    var x = event.clientX;
    var y = event.clientY;
    // 创建<div>元素,显示的位置在鼠标当前的坐标值
    var div = document.createElement('div');
    div.setAttribute('class','circle');
    body.appendChild(div);
    // rgb(0,0,0)格式 -> 颜色随机
    var r = parseInt(Math.random()*255);
    var g = parseInt(Math.random()*255);
    var b = parseInt(Math.random()*255);

    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundColor = 'rgb('+r+','+g+','+b+')';
    div.style.borderRadius = '50%';
    div.style.opacity = 1;
    div.style.position = 'absolute';
    div.style.left = x - width/2 + 'px';
    div.style.top = y - height/2 + 'px';

    animate(div);
  }
  // 定义函数 -> 实现动画效果
  function animate(elem){
    var style = window.getComputedStyle(elem,null);
    /*var width = parseInt(style.width);
    var height = parseInt(style.height);
    var left = parseInt(style.left);
    var top = parseInt(style.top);
    width++;
    height++;
    elem.style.width = width + 'px';
    elem.style.height = height + 'px';
    elem.style.left = (left - 0.5) + 'px';
    elem.style.top = (top - 0.5) +'px';*/

    var opacity = style.opacity;

    if (opacity <= 0){
      clearTimeout(t);
      // 删除当前元素
    }

    opacity -= 0.01;
    elem.style.opacity = opacity;

    // 设定定时器
    var t = setTimeout(function(){
      animate(elem);
    },50);
  }

</script>
</body>
</html>

以上这篇js定时器+简单的动画效果实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
JQuery 风格的HTML文本转义
Jul 01 Javascript
Js 刷新框架页的代码
Apr 13 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
Nov 10 #Javascript
angular之ng-template模板加载
Nov 09 #Javascript
深入理解Vue 单向数据流的原理
Nov 09 #Javascript
node.js基于express使用websocket的方法
Nov 09 #Javascript
angular2系列之路由转场动画的示例代码
Nov 09 #Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 #Javascript
基于vue配置axios的方法步骤
Nov 09 #Javascript
You might like
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php的一个简单加密解密代码
2014/01/14 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
对命令行模式与python交互模式介绍
2018/05/12 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
python实现回旋矩阵方式(旋转矩阵)
2019/12/04 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
教师校本培训方案
2014/02/26 职场文书
商务英语广告词大全
2014/03/18 职场文书
化妆品活动策划方案
2014/05/23 职场文书
教师工作决心书
2015/02/04 职场文书
三行辞职书范文
2015/02/26 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript