animation js控制 缓动效果
<!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控制 缓动效果的更多相关文章
- JS实现缓动效果-让div运动起来
var tween = { linear:function(t,b,c,d){ return c*t/d + b; }, easeIn:function(t,b,c,d){ return c * ( ...
- js运动缓动效果
http://www.cnblogs.com/hongru/archive/2012/03/16/2394332.html 转分享地址
- 过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...
- javascript的缓动效果
这部分对原先的缓动函数进行抽象化,并结合缓动公式进行强化.成品的效果非常惊人逆天.走过路过不要错过. 好了,打诨到此为止.普通的加速减速是难以让人满意的,为了实现弹簧等让人眼花缭乱的效果必须动用缓动公 ...
- Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果
Adobe Edge Animate –弹性的方块-使用tweenmax缓动效果 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 此前有Edge爱好者提出一 ...
- 《JavaScript 实战》:Tween 算法及缓动效果
Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
- [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果
package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...
- javascript 45种缓动效果BY司徒正美
javascript 45种缓动效果 参数 类型 说明 el element 必需,为页面元素 begin number 必需,开始的位置 change number 必需,要移动的距离 durati ...
随机推荐
- WDA导出文件XLS,WORD
METHOD ONACTIONEXCEL . DATA: LO_NODE TYPE REF TO IF_WD_CONTEXT_NODE, "Node LO_ELEM TYPE REF TO ...
- 远程线程DLL注入64位进程
int main() { BOOL bFlag = FALSE; char *szDllName = "MSGDLL.dll"; //bFlag = EnablePrivilege ...
- 揭秘JavaScript中谜一样的this
揭秘JavaScript中谜一样的this 在这篇文章里我想阐明JavaScript中的this,希望对你理解this的工作机制有一些帮助.作为JavaScript程序员学习this对于你的发展有 ...
- spider_jpg
__author__ = 'sus' #urllib模块提供了读取Web页面数据的接口import urllib#re模块主要包含了正则表达式import re#定义一个getHtml()函数def ...
- Java 第二次作业
package javazuoye;import javax.swing.*; import java.awt.*;import java.awt.event.*;public class dengl ...
- fonts.useso.com 访问变慢
fonts.useso.com 替换为 fonts.lug.ustc.edu.cn ajax.useso.com 替换为 ajax.lug.ustc.edu.cn the ...
- 关于Gridview的列名问题
Gridview的的数据绑定方法有两种: 一种就是datasourceid的绑定在绑定过程当中也可以通过select来选择性的绑定. 二种就是databind(): SqlDataAdapter da ...
- Yii2 rules 添加时间比较功能
php比较类文件:yiisoft\yii2\validators\CompareValidator.php JS比较类文件: yiisoft\yii2\assets\yii.validation.js ...
- SQL Server数据库性能优化之SQL语句篇【转】
SQL Server数据库性能优化之SQL语句篇http://www.blogjava.net/allen-zhe/archive/2010/07/23/326927.html 近期项目需要, 做了一 ...
- html5 audio的暂停与播放
在html5里,audio是新增的功能.它方便了用户. 大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 audio 元素来包含音频 ...