zoukankan      html  css  js  c++  java
  • JS-实现动画原理二(非闭包方式)

    之前讲过一种闭包 来 现实js动画,今天讲讲非闭包的方式来实现的呀:

     1 //我们可以使用非闭包方法来实现;
     2   
     3   var index=1;  //非闭包的关键就是使用全局变量的呀;
     4   var Timer;
     5   function cool(){
     6        Timer=setInterval(function(){
     7            change(index);
     8            index++;
     9            if(index==100){
    10              index=1;    
    11             clearInterval(Timer);
    12            }
    13        },10) //时间间隔
    14   }
    15   function change(val){
    16        var obj=document.getElementById("man");
    17        var zhen=1;        //用这个index 来控制 动画的帧数
    18                          //针数 越小 那么动画 就越光滑的i呀;
    19        var len=zhen*val;
    20        obj.style.height=len+"px";
    21   }
         //ps:这个效果非常的平滑,看起来心情和舒畅滴呀;

     更为具体的实例应用,请看我的另外一篇文章。

     较为完善的代码:

    var Timer=null;
        function move2(){
            var obj=document.getElementById("move");
            var zhen=3; //相当于speed,暂时没考虑这个方向;
            var iTarget=200;
               clearInterval(Timer);
            //始终柑橘这个方法不够流畅
            setInterval(function (){
                if((iTarget-obj.offsetHeight)>zhen){
                   obj.style.height=obj.offsetHeight+zhen+"px";
                }else{
                  clearInterval(Timer);    
                   obj.style.height=iTarget+"px"; //最后强行个加到目标点;
                }
            },10)
        }
        function test(){
            var obj=document.getElementById("move");
            var value=obj.offsetHeight;
            alert(value);
        }

     JS-实现图片横向滑动

  • 相关阅读:
    Windbg学习 (0x0002) 命令基础
    Windbg学习 (0x0001) 安装与基本配置
    python 20day--装饰器详解
    python 19day--生成器详解
    python 18day--迭代器详解
    python 17day--内置函数
    python 16day--函数作用域与函数式编程
    python 15day--递归函数与匿名函数
    python 14day--函数
    python 13day--集合、字符串格式化
  • 原文地址:https://www.cnblogs.com/mc67/p/4820170.html
Copyright © 2011-2022 走看看