js 缓冲运动
js的缓冲运动, 常用于轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 100px; height: 100px; background: skyblue; position: absolute; } </style> </head> <body> <div id="box"></div> <script> var oBox = document.getElementById("box"); startMove(oBox, {left:500}, function(){ startMove(oBox, {top:500}) }); //可以获取非行内样式 function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]; } function startMove(obj, json, fn) { //清除定时器,避免多次调用造成定时器执行混乱 clearInterval(obj.timer); obj.timer = setInterval(function(){ for(attr in json){ var icur = 0; //attr如果是opacity, 考虑IE的兼容写法 icur = (attr == 'opacity') ? Math.round(getStyle(obj, attr) * 100) : parseInt(getStyle(obj, attr)); //iSpeed是一个增长变量,除数可看情况更改 var iSpeed = (json[attr] - icur)/50; //不明白iSpeed为什么要 大于0向上取整,小于0向下取整, 可能是不让iSpeed等于0 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //改变样式 if(attr == 'opacity'){ obj.style.filter = "alpha(opacity:"+(icur+iSpeed)+")"; obj.style.opacity = (icur+iSpeed)/100; }else{ obj.style[attr] = icur + iSpeed + 'px'; } //当样式对应的值等于目标数值,清除定时器,如果有定义fn这个回调函数,则执行 if(icur == json[attr]){ clearInterval(obj.timer); fn && fn(); } } }, 10) } </script> </body> </html>