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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
jquery操作cookie插件分享
Jan 14 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
js实现单张图片平移切换效果
Oct 11 Javascript
代码分析vue中如何配置less
Sep 28 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
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
python原始套接字编程示例分享
2014/02/21 Python
pymongo给mongodb创建索引的简单实现方法
2015/05/06 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
python使用opencv进行人脸识别
2017/04/07 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python支付宝支付示例详解
2019/08/22 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
就业自荐书
2013/12/05 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
学校督导评估方案
2014/06/10 职场文书
走群众路线学习笔记
2014/11/06 职场文书
自主招生自荐信范文
2015/03/04 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android