1.  

<!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>

  1.  
  1. <div id="box" style="position:absolute;">Hello!</div>
  2. <script>
  3. var timers = {
  4.     timerID: 0,
  5.     timers: [],
  6.     delay:100,
  7.     maxnum:200,
  8.     minnum:0,
  9.     start: function(){
  10.  
  11.         // console.log(this.timerID)
  12.         if ( this.timerID ){
  13.             return;
  14.         }
  15.         (function(){
  16.         for ( var i = 0; i < timers.timers.length; i++ ){
  17.             if ( timers.timers[i]() === false ) {
  18.                 timers.timers.splice(i, 1);
  19.                 i--;
  20.             }
  21.         }
  22.         timers.timerID = setTimeout( arguments.callee, timers.delay );
  23.  
  24.         })();
  25.     },
  26.     stop: function(){
  27.         clearTimeout( this.timerID );
  28.         this.timerID = 0;
  29.     },
  30.     add: function(fn){
  31.         this.timers.push( fn );
  32.         this.start();
  33.     }
  34. };
  35. var box = document.getElementById("box"), left = 0, top = 20;
  36. timers.add(function(){
  37.     box.style.left = left + "px";
  38.     if ( ++left > timers.maxnum ){
  39.         return false;
  40.     }
  41.      var step = function(){
  42.             left+=1;
  43.             box.style.left = left + "px";
  44.             if(left < timers.maxnum){
  45.                 setTimeout(step,10);
  46.                 console.log(11)
  47.             }else{
  48.                 setTimeout(stepReverse,10);
  49.                 console.log(22)
  50.             }
  51.         };
  52.  
  53.         var stepReverse = function(){
  54.             left-=1;
  55.             box.style.left = left + "px";
  56.             if(left > timers.minnum){
  57.                 console.log(4444)
  58.                 setTimeout(stepReverse,10);
  59.             }else{
  60.                  setTimeout(step,10);
  61.                 // box.style.display = "none";
  62.             }
  63.             console.log(3333)
  64.         };
  65.         setTimeout(step,10);
  66. });
  67. // timers.add(function(){
  68. //     box.style.top = top + "px";
  69. //     top += 2;
  70. //     if ( top > 180 ){
  71. //         return false;
  72. //     }
  73. // });
  74. </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. js运动缓动效果

    http://www.cnblogs.com/hongru/archive/2012/03/16/2394332.html  转分享地址

  3. 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

    难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...

  4. javascript的缓动效果

    这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...

  5. Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果

    Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...

  6. 《JavaScript 实战》：Tween 算法及缓动效果

    Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...

  7. 软件项目技术点(1)——Tween算法及缓动效果

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...

  8. [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果

    package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...

  9. javascript 45种缓动效果BY司徒正美

    javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...

随机推荐

  1. AE调用GP工具的方法（转）

    第一,首先要明确自己需要调用arctoolbox里面的什么工具,实现什么样的功能. 第二,按照需求看看在arctoolbox工具中是怎么实现功能的,然后确定需要的数据源. 第三,编写command或t ...

  2. gulp教程之gulp-rev-append

    简介: 使用gulp-rev-append给页面的引用添加版本号,清除页面引用缓存. 1.安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件 ...

  3. 后台接收前台传入的json 数据

    引入JSONArray的类型为org.json而不是net.sf.json,笔者开始引入的是net.sf.json.JSONArray, 但JSONObject.fromObject(obj)时报错报 ...

  4. 安装.Net Framework3.5

    Dism /online /enable-feature /featurename:NetFX3 /All /Source:V:\sources\sxs /LimitAccess

  5. BZOJ1828 [Usaco2010 Mar]balloc 农场分配

    直接贪心,我们把线段按照右端点从小到大排序,然后一个个尝试插入即可... 来证明贪心的正确性: 不妨设贪心得到的答案集合为$S$,最优解的答案集合为$T$ 若$S$不是最优解,那么$S \not= T ...

  6. Android-小tips

    1.只保留float类型的一位小数,  String.format("%.1f", float值)   2.android  edittext 限制输入内容:  android:d ...

  7. c语言基础表达式, 关系运算符, 逻辑运算符, 位运算符, 数据的取值范围, 分支结构(if...else, switch...case)

    1.表达式: 表达式的判断是有无结果(值), 最简单的表达式是一个常量或变量, 如:12, a, 3 + 1, a + b, a + 5 都是表达式 2.BOOL(布尔)数据类型: c语言中除了基本数 ...

  8. HDU--1232--畅通工程--并查集

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  9. windows8.1下android开发环境搭建(Eclipse+Android sdk+ADT+Genymotion)

    一.基本jdk.eclipse环境 二.android sdk 1.下载安装:https://developer.android.com/sdk/installing/index.html?pkg=t ...

  10. 轮播图适应代码jQ

    (function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...