<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>缓动效果</title>
</head>
<body>
<div id="btn" style='position:absolute;'>按钮</div>
<script type="text/javascript">
var effect = {
    insertBtn: document.getElementById("btn"),
};
effect.insertBtn.onclick = function(){
    number(effect.insertBtn,18,100);
};
var number = function(node,minnum,maxnum){
    var left = minnum;
    var step = function(){ 
        left+=1;
        node.style.left = left + "px";
        if(left < maxnum){
            setTimeout(step,10);
        }else{
            setTimeout(stepReverse,10); 
        }
    };
     var stepReverse = function(){
         left-=1;
         node.style.left = left + "px";
         if(left > minnum){
             setTimeout(stepReverse,10);
         }else{
         // node.style.display = "none";
         }
     };
     setTimeout(step,10);
 };
 </script>
</body>
</html>


 






<div id="box" style="position:absolute;">Hello!</div>

<script>

var timers = {

    timerID: 0,

    timers: [],

    delay:100,

    maxnum:200,

    minnum:0,

    start: function(){

        // console.log(this.timerID)

        if ( this.timerID ){

            return;

        }

        (function(){

        for ( var i = 0; i < timers.timers.length; i++ ){

            if ( timers.timers[i]() === false ) {

                timers.timers.splice(i, 1);

                i--;

            }

        }

        timers.timerID = setTimeout( arguments.callee, timers.delay );

        })();

    },

    stop: function(){

        clearTimeout( this.timerID );

        this.timerID = 0;

    },

    add: function(fn){

        this.timers.push( fn );

        this.start();

    }

};

var box = document.getElementById("box"), left = 0, top = 20;

timers.add(function(){

    box.style.left = left + "px";

    if ( ++left > timers.maxnum ){

        return false;

    }

     var step = function(){

            left+=1;

            box.style.left = left + "px";

            if(left < timers.maxnum){

                setTimeout(step,10);

                console.log(11)

            }else{

                setTimeout(stepReverse,10);

                console.log(22)

            }

        };

        var stepReverse = function(){

            left-=1;

            box.style.left = left + "px";

            if(left > timers.minnum){

                console.log(4444)

                setTimeout(stepReverse,10);

            }else{

                 setTimeout(step,10);

                // box.style.display = "none";

            }

            console.log(3333)

        };

        setTimeout(step,10);

});

// timers.add(function(){

//     box.style.top = top + "px";

//     top += 2;

//     if ( top > 180 ){

//         return false;

//     }

// });

</script>


												


											
animation js控制 缓动效果的更多相关文章
	

    
								
  1. JS实现缓动效果-让div运动起来
		
    var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * (  ...
    
		
    2. 
						
  2. js运动缓动效果
		
    http://www.cnblogs.com/hongru/archive/2012/03/16/2394332.html  转分享地址
    
		
    3. 
						
  3. 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
		
    难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...
    
		
    4. 
						
  4. javascript的缓动效果
		
    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
    
		
    5. 
						
  5. Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果
		
    Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...
    
		
    6. 
						
  6. 《JavaScript 实战》：Tween 算法及缓动效果
		
    Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...
    
		
    7. 
						
  7. 软件项目技术点(1)——Tween算法及缓动效果
		
    AxeSlide软件项目梳理   canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
    
		
    8. 
						
  8. [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果
		
    package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...
    
		
    9. 
						
  9. javascript 45种缓动效果BY司徒正美
		
    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 《精通C#》第十三章 对象的生命周期
			
    在C#中,程序员无法直接在C#中删除一个托管对象,因为C#不提供这个功能,那么类的实例就需要通过CLR调用垃圾回收机制进行清除,回收内存..NET垃圾回收器会压缩空的内存块来实现优化,为了辅助这一功能 ...
    
			
    2. 
						
  2. gulp教程之gulp-uglify
			
    简介: 使用gulp-uglify压缩javascript文件,减小文件大小. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 1. ...
    
			
    3. 
						
  3. Python--逆序打印
			
    才开始学习Python,我个人喜欢边看实例边学习其中的知识点,于是在网上找到了“Python100例”, 案例很不错,但是其中有几个例子不能正确实现,比如第29个例子--“给一个不多于5位的正整数,  ...
    
			
    4. 
						
  4. VS2013 破解
			
    密钥 : BWG7X-J98B3-W34RT-33B3R-JVYW9
    
			
    5. 
						
  5. file_put_contents保存数据,
			
    file_put_contents("sui.txt", var_export($now_member,TRUE),FILE_APPEND); 可以保存数组,方便调试
    
			
    6. 
						
  6. Windows Store App JavaScript 开发：页内导航
			
    页内导航是在一个页面内根据需要加载其他页面的内容,在开发基于JavaScript的Windows应用商店应用时,可以使用WinJS.Navigation.navigate函数传递要加载的页面地址并使用 ...
    
			
    7. 
						
  7. Swift 05.Block
			
    Swift的函数用法还真是灵活.但是个人感觉更灵活的还是闭包. swift闭包的概念大抵相当于OC的block的概念.如果对于block的理解很透彻的话,闭包的原理性的东西还是很好理解的. 剩下的就是 ...
    
			
    8. 
						
  8. Virtual Box 下Ubuntu桥接网络设置
			
    转自:http://os.51cto.com/art/200908/144564.htm 一般而言,安装完VirtualBox设定网路时选择默认的NAT模式,Guest就可顺利联网了,但是这种方式比较 ...
    
			
    9. 
						
  9. Listener实现单态登陆
			
    MyEclipse中新建Web Project项目,完整目录如下: 需要的jar包为commons-logging-xxx.jar 1.singleton.jsp <%@ page langua ...
    
			
    10. 
						
  10. 使用Runtime.getRuntime().exec()在java中调用python脚本
			
    举例有一个Python脚本叫test.py,现在想要在Java里调用这个脚本.假定这个test.py里面使用了拓展的包,使得pythoninterpreter之类内嵌的编译器无法使用,那么只能采用ja ...
    
			
    11.