js 模拟css3 动画2
2024-10-12 03:09:01
<html>
<head>
<title> javaScript缓动入门 </title>
</head>
<body>
<style type=text/css>
#taxiway {
background: #e8e8ff; width: 800px; height: 100px
}
#move {
background: #a9ea00; width:100px; height:98px; border:1px solid red
}
</style>
<div id="taxiway">
<div id="move" style="position: absolute; left: 50" onClick="Run()"></div>
</div>
<p class=notice display="text-align:center">点击可移动绿色方块</p>
</body>
<script>
var Tween = {
Quad: {
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
}
}
} //b:div之样式left初值,c:div要移动的距离,d:div在时间d内完成移动,t:时间
var b=50,c=650,d=100,t=0;
function Run(){
move.style.left = Math.ceil(Tween.Quad.easeOut(t,b,c,d)) + "px";
if(t<d){ t++; setTimeout(Run, 10); }
}
</script> </html>
最新文章
- adnroid 监听软键盘的显隐
- CSS-position详解
- Volley源码分析(1)----Volley 队列
- Stockbroker Grapevine(floyd)
- POJ 3977
- [转载]:Endnote 自定义style文件的默认位置
- Delphi WebBrowser控件的使用(大全 good)
- 大容量XFS异常处理
- JCronTab 定时调用
- treeview和listview的用法
- DS4700磁盘阵列的控制器微码升级操作记录(收录百度文库)
- centos6.5 rsync+inotify实现服务器之间文件实时同步
- LOJ-10109(欧拉回路)
- 我可能不懂Array.prototype.sort
- MariaDB:登陆报错:mysqladmin: connect to server at 'localhost' failed
- Java复习2-对象与类
- 例子:使用Grunt创建一个Node.js类库
- SpringBoot整合SpringKafka实现消费者史上最简代码实现
- A链接IE6、7下失效场景及解决方案
- ASP.NET Core学习总结(2)