<!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. PDF 补丁丁 0.5.0.2713 发布（替换字库功能修正字符宽度问题）
			
    新版本替换字库后,采用新字库的字符宽度.基本上可以满足一般的字库替换需求.请下载新版本测试.
    
			
    2. 
						
  2. 使用VisualVM进行性能分析及调优（转）
			
    VisualVM 是一款免费的\集成了多个 JDK 命令行工具的可视化工具,它能为您提供强大的分析能力,对 Java 应用程序做性能分析和调优.这些功能包括生成和分析海量数据.跟踪内存泄漏.监控垃圾回 ...
    
			
    3. 
						
  3. 【C#】 格式化说明符 string.Format  WriteLine
			
    定义 格式说明符的语法由3个字段组成:索引号.对齐说明符和格式字段.String.Format和WriteLine都遵守同样的格式化规则. 对齐说明符 对齐说明符表示了字段中字符的最小宽度.对齐说明符 ...
    
			
    4. 
						
  4. 面试复习（C++）之直接插入排序
			
    #include <iostream> using namespace std; void Insertsort(int *a,int len) { ;j<len;j++) { in ...
    
			
    5. 
						
  5. SYS与SYSTEM、DBA与SYSDBA的区别
			
    SYS与SYSTEM: 1. sys 的角色是sysdba system 的角色是sysoper 2. sys 具有create database的权限 system没有该权限 3. sys可以建数据 ...
    
			
    6. 
						
  6. 黑马程序员——C语言基础   枚举 宏定义 自定义 static exterm
			
    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一)枚举 1)枚举类型的定义 枚举是C语言中的一种基本数据类型,并不是构 ...
    
			
    7. 
						
  7. C#遍历XML文件动态加载菜单
			
    通过遍历XML文件动态加载菜单,顺便利用WebBrowser控件实现一个简单的桌面浏览器 效果如下: 代码如下: XMLFile1.xml <?xml version="1.0&quo ...
    
			
    8. 
						
  8. [转] 从 C 到 Objective C 入门1
			
    转自: http://blog.liuhongwei.cn/iphone/objective-c/ 进军iPhone开发,最大的难点之一就是怪异的Objective C语法了.不过,了解之后才发现,原 ...
    
			
    9. 
						
  9. Java泛型学习笔记 - (三)泛型方法
			
    泛型方法其实和泛型类差不多, 就是把泛型定义在方法上, 格式大概就是: public <类型参数> 返回类型 方法名(泛型类型 变量名) {...}泛型方法又分为动态方法和静态方法,:1. ...
    
			
    10. 
						
  10. boost和std中的thread的引用参数
			
    boost 1.60.0 先上代码: #include <boost/thread.hpp> #include <iostream> void add(int &i)  ...
    
			
    11.