<!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. mysql自增主键归零的方法
			
    最近老是要为现在这个项目初始化数据,搞的很头疼,而且数据库的Id自增越来越大,要让自增重新从1开始:那么就用下面的方法吧:方法一: 如果曾经的数据都不需要的话,可以直接清空所有数据,并将自增字段恢复从 ...
    
			
    2. 
						
  2. EntityFrameWork使用MySql数据库分页的BUG
			
    环境 使用MySQL Connector NET 6.7.4+EF5.0+VS2010 问题描述 IQueryable<T>类型的Where方法和Skip或Take方法一起使用时,生成的S ...
    
			
    3. 
						
  3. MT5：放大市场价格指标
			
    指标把当前交易品种价格简单的放大显示在图表上.   //+------------------------------------------------------------------+//|  ...
    
			
    4. 
						
  4. django orm总结[转载]
			
    django orm总结[转载] 转载地址: http://www.cnblogs.com/linjiqin/archive/2014/07/01/3817954.html 目录1.1.1 生成查询1 ...
    
			
    5. 
						
  5. 编译GCC4.8.2
			
        公司的机器上默认是GCC4.4.6,为了完整的体验C++11,可以自己编译一个GCC4.8.2出来(自带了更高版本的glibc). 以下是备忘. 1.下载GCC源码以及依赖库 gmp ftp: ...
    
			
    6. 
						
  6. C# cmd执行命令
			
    CMD命令执行 ///<summary>         /// cmd命令执行,在cmd上可以执行的语句,直接传到这里,调用grads画图实例如下:         ///  Cmd(& ...
    
			
    7. 
						
  7. phonegap + xcode5.0.2 配置开发环境
			
    phonegap官网:  http://phonegap.com/ 第一部:安装nodejs 安装地址:http://nodejs.org/ 安装phoneGap 官网下载http://phonega ...
    
			
    8. 
						
  8. stm8s103串口
			
    #include "uart.h" #define UART2#define uart_115200 1 void Init_UART2(void){#ifdef UART2    ...
    
			
    9. 
						
  9. 【转】2014年25款最好的jQuery插件
			
    2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP   时间:2014-12-30 10:24:10   阅读数:2267 分享到: 0 http://www.php10 ...
    
			
    10. 
						
  10. CDHtmlDialog的基本使用
			
    转自:http://blog.csdn.net/sky04/article/details/7587406 因为我的部门只有我一个人(无奈之极,只有我一个做C++的,其他的都在做C#),所以我去跟技术 ...
    
			
    11.