<!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. 一些css知识
			
    两个"::"和一个":"在css3中主要用来区分伪类和伪元素. 1.设置 placeholder属性: // firefox input::-moz-place ...
    
			
    2. 
						
  2. guava学习--SettableFuture
			
    转载:https://my.oschina.net/realfighter/blog/349931 翻开SettableFuture的源码,我们看到SettableFuture继承了AbstractF ...
    
			
    3. 
						
  3. BZOJ1828 [Usaco2010 Mar]balloc 农场分配
			
    直接贪心,我们把线段按照右端点从小到大排序,然后一个个尝试插入即可... 来证明贪心的正确性: 不妨设贪心得到的答案集合为$S$,最优解的答案集合为$T$ 若$S$不是最优解,那么$S \not= T ...
    
			
    4. 
						
  4. [原创]C#应用WindowsApi实现查找(FindWindowEx)文本框(TextBox、TextEdit)。
			
    /// <summary> /// 获取文本框控件 /// </summary> /// <param name="hwnd">文本框所在父窗口 ...
    
			
    5. 
						
  5. WHMCS成功安装和使用方法及添加支付宝,PayPal收款教程
			
    一.WHMCS安装前准备 1.WHMCS官网: 1.官方首页:http://www.whmcs.com/ 2.WHMCS需要安装在一个带MysqL数据库的PHP服务器中,一般地我们日常安装的VPS控制 ...
    
			
    6. 
						
  6. iOS 运行时runtime控制私有变量以及私有方法
			
    OC是运行时语言,只有在程序运行时,才会去确定对象的类型,并调用类与对象相应的方法.利用runtime机制让我们可以在程序运行时动态修改类.对象中的所有属性.方法,就算是私有方法以及私有属性都是可以动 ...
    
			
    7. 
						
  7. Bestcoder Round 47 && 48
			
    1.Senior's Array(hdu 5280) 题目大意:给出大小为N的数组和P,求将数组中的某个元素替换为P后的最大连续子段和.N<=1000 题解: 1.送分题,比赛的时候只想到枚举替 ...
    
			
    8. 
						
  8. Web开发中最致命的8个小错误
			
    错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:logo图片没有链接到主页 点击 ...
    
			
    9. 
						
  9. java web学习之初识jsp
			
    用java语言(+html语言)开发动态资源的技术: jsp的运行过程,1:tomcat服务器将jsp代码翻译成java代码,并且编译成class文件 2:tomcat服务器构造类对象 3:tomca ...
    
			
    10. 
						
  10. 封装pyMysql
			
    #!/usr/bin/python import MySQLdb class SpiderPDO: def __init__(self): db_host = '127.0.0.1' db_user  ...
    
			
    11.