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 相关文章推荐
js DOM模型操作
Dec 28 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
JavaScript二维数组实现的省市联动菜单
May 08 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
浅谈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
phpmyadmin的#1251问题
2006/11/25 PHP
php银联网页支付实现方法
2015/03/04 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
php获取英文姓名首字母的方法
2015/07/13 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python二次规划和线性规划使用实例
2019/12/09 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
用python对excel查重
2020/12/07 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
四种会话跟踪技术
2015/05/20 面试题
J2EE模式面试题
2016/10/11 面试题
外贸业务员的岗位职责
2013/11/23 职场文书
期末自我鉴定
2014/02/02 职场文书
公共场所标语
2014/06/30 职场文书
国际金融专业自荐信
2014/07/05 职场文书
民族学专业求职信
2014/07/28 职场文书
暑假安全教育广播稿
2014/09/10 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
电力工程合作意向书
2015/05/11 职场文书
心理健康教育主题班会
2015/08/13 职场文书
python xlwt模块的使用解析
2021/04/13 Python