<!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. WDA导出文件XLS,WORD
			
    METHOD ONACTIONEXCEL . DATA: LO_NODE TYPE REF TO IF_WD_CONTEXT_NODE, "Node LO_ELEM TYPE REF TO  ...
    
			
    2. 
						
  2. 远程线程DLL注入64位进程
			
    int main() { BOOL bFlag = FALSE; char *szDllName = "MSGDLL.dll"; //bFlag = EnablePrivilege ...
    
			
    3. 
						
  3. 揭秘JavaScript中谜一样的this
			
      揭秘JavaScript中谜一样的this 在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助.作为JavaScript程序员学习this对于你的发展有 ...
    
			
    4. 
						
  4. spider_jpg
			
    __author__ = 'sus' #urllib模块提供了读取Web页面数据的接口import urllib#re模块主要包含了正则表达式import re#定义一个getHtml()函数def  ...
    
			
    5. 
						
  5. Java 第二次作业
			
    package javazuoye;import javax.swing.*; import java.awt.*;import java.awt.event.*;public class dengl ...
    
			
    6. 
						
  6. fonts.useso.com 访问变慢
			
    fonts.useso.com 替换为        fonts.lug.ustc.edu.cn ajax.useso.com   替换为       ajax.lug.ustc.edu.cn the ...
    
			
    7. 
						
  7. 关于Gridview的列名问题
			
    Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...
    
			
    8. 
						
  8. Yii2 rules 添加时间比较功能
			
    php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...
    
			
    9. 
						
  9. SQL Server数据库性能优化之SQL语句篇【转】
			
    SQL Server数据库性能优化之SQL语句篇http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 近期项目需要, 做了一 ...
    
			
    10. 
						
  10. html5 audio的暂停与播放
			
    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...
    
			
    11.