zoukankan      html  css  js  c++  java
  • javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG,

    timer = setInterval(show, 30);本来show是一个自定义函数,
    当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数onetwo无法被导入,所以需要做以下代码改进和优化

    原版的html和css代码在这里javascript动画效果之缓冲动画

    js代码如下

     1  <script>
     2         function $(id) {
     3             return typeof id === "string" ? document.getElementById(id) : id;
     4         }
     5 
     6         window.onload = function() {
     7 
     8             //自定义变量
     9             var pto = $("div");
    10             var btn = $("show");
    11             var timer = null;
    12             var speed = 0;
    13 
    14             //鼠标移动进入绑定事件
    15             btn.onmouseenter = function() {
    16                 //调用自定义函数,并传入参数0
    17                 showPto(0);
    18             }
    19             //鼠标移动离开绑定事件
    20             btn.onmouseleave = function() {
    21                 //同理,并传入参数-200
    22                 showPto(-200);
    23             }
    24 
    25             //自定义函数,自定义参数名
    26             function showPto(obj) {
    27                 //当前只需要一个定时器,所以需要在每次开始前清除定时器
    28                 clearInterval(timer);
    29                 //定义定时器,自动增减
    30                 timer = setInterval(function() {
    31                     //obj为0时(0--200)/20,speed为+10,Math.ceil(),此时pto.offsetLeft变0
    32                     //onj为-200时(-200-0)/20,speed为-10,所以Math.floor()
    33                     speed = (obj - pto.offsetLeft) / 20;
    34                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    35                     if (pto.offsetLeft == obj) {
    36                         //当pto.offsetLeft为0或者-200时,清除定时器
    37                         clearInterval(timer);
    38                     } else {
    39                         //通过speed来增加减少offsetLeft的值
    40                         pto.style.left = pto.offsetLeft + speed + 'px';
    41                     }
    42                 }, 30);
    43             }
    44 
    45 
    46 
    47         }
    48     </script>
  • 相关阅读:
    centos和ubuntu配置路由的三种方式
    程序包编译安装
    逻辑卷磁盘管理和dd命令
    linux磁盘管理
    CDOJ 1269 ZhangYu Speech 数组处理
    poj 2236 Wireless Network 并查集
    poj 1182 食物链 并查集
    POJ 2109 Power of Cryptography 数学题 double和float精度和范围
    CDOJ 1264 人民币的构造 区间问题+数论
    CDOJ 1263 The Desire of Asuna 贪心
  • 原文地址:https://www.cnblogs.com/WhiteM/p/6024554.html
Copyright © 2011-2022 走看看