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