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-实现图片横向滑动

  • 相关阅读:
    ZOJ 2859 Matrix Searching
    URAL 1102. Strange Dialog
    ZOJ 1986 Bridging Signals
    POJ 3233 Matrix Power Series
    POJ 1836 Alignment
    POJ 3267 The Cow Lexicon
    ZOJ 3471 Most Powerful
    IIS:HTTP 错误 403.9 禁止访问:连接的用户过多
    使用Command对象执行数据库操作
    C#类型转换
  • 原文地址:https://www.cnblogs.com/mc67/p/4820170.html
Copyright © 2011-2022 走看看