<!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. 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. WDA导出文件XLS,WORD

    METHOD ONACTIONEXCEL . DATA: LO_NODE TYPE REF TO IF_WD_CONTEXT_NODE, "Node LO_ELEM TYPE REF TO ...

  2. 远程线程DLL注入64位进程

    int main() { BOOL bFlag = FALSE; char *szDllName = "MSGDLL.dll"; //bFlag = EnablePrivilege ...

  3. 揭秘JavaScript中谜一样的this

      揭秘JavaScript中谜一样的this 在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助.作为JavaScript程序员学习this对于你的发展有 ...

  4. spider_jpg

    __author__ = 'sus' #urllib模块提供了读取Web页面数据的接口import urllib#re模块主要包含了正则表达式import re#定义一个getHtml()函数def ...

  5. Java 第二次作业

    package javazuoye;import javax.swing.*; import java.awt.*;import java.awt.event.*;public class dengl ...

  6. fonts.useso.com 访问变慢

    fonts.useso.com 替换为        fonts.lug.ustc.edu.cn ajax.useso.com   替换为       ajax.lug.ustc.edu.cn the ...

  7. 关于Gridview的列名问题

    Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...

  8. Yii2 rules 添加时间比较功能

    php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...

  9. SQL Server数据库性能优化之SQL语句篇【转】

    SQL Server数据库性能优化之SQL语句篇http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 近期项目需要, 做了一 ...

  10. html5 audio的暂停与播放

    在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...