您的位置：首页 > Web前端 > JavaScript

一道js动画题目

2013-11-02 14:28 309 查看

　　昨日TX上机+面试，无奈又输在时间和平时的细节积累上了，废话不多说，直接上这道让我悲剧了的题目：
　　实现一个DIV动画效果，DIV移动从快到慢，最后停止，时间为5s。
　　咋来审题，其实需要实现这个效果是相当简单的，但是毕竟是亲身上机，无奈上机使用的编辑器也没有js的智能提示（平时习惯太坏），所以各方面因素，这道题终究迫于时间问题而未完成，这里做个笔记，来了却自己当时的做题思路，代码奉上：

<!DOCTYPE HTML>
<html>
<head>
<title>Animation Test</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

#demo {
position: absolute;
left: 0px;
top: 0px;
width: 100px;
height: 100px;
background-color: #aaf;
}
</style>
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
(function(window){
"use strict";
var timer,
demo;

timer = {
id: null,
fns: [],
delay: 1000 / 60,
loop: function(){
var i,
l,
fns;
fns = timer.fns;
for(i = 0, l = fns.length; i < l; i++){
if(fns[i]() === false){
fns.splice(i, 1);
i--;
l--;
}
}
if(fns.length <= 0){
timer.stop();
}
},
start:function(){
if(this.id !== null){
return;
}
this.id = window.setInterval(this.loop, this.delay);
},
stop:function(){
if(this.id === null){
return;
}
window.clearInterval(this.id);
},
add:function(func){
if(typeof func !== "function"){
return;
}
this.fns.push(func);
this.start();
}
};

demo = {
o: document.getElementById("demo"),
speed: 5,
startTime: null,
duration: 5000,
now: function(){
return (new Date()).getTime();
},
setOffsetX:function(x){
this.o.style.left = x + "px";
},
getOffsetX: function(){
return parseFloat(this.o.style.left) || 0;
},
step:function(){
var x;
if(demo.now() > demo.startTime + demo.duration){
return false;
}
x = demo.getOffsetX();
demo.speed = 5 * (1 - (demo.now() - demo.startTime) / demo.duration);
demo.setOffsetX(x + demo.speed);
},
doTest:function(){
if(this.startTime !== null){
return;
}
this.startTime = this.now();
timer.add(this.step);
}
};

demo.doTest();
})(window);
</script>
</body>
</html>

　　代码中构建了两个对象，一个timer为时间定时器，一个demo对象控制动画，核心思想是让DIV移动时，他的speed逐步衰减（与剩余时间有关，按剩余时间除以总时间来算百分比），效果大家自己COPY代码演示即可。

　　不管怎样，半个多月了，经历大大小小的各种面试，学到了许多东西。睡觉了，今天又要继续找工作咯 ; )

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航