网站上很多绚丽的动态效果,大部分都是使用JS控制了元素属性的变化,比如说width、height、left、top甚至opacity。今天大树给大家分享一个万能的JS缓冲运动模板,你只需要套用,就能立马让你的网站动感十足。
function doMove(obj, json, endFn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var bestop=true; for(attr in json){ //取当前值 var curr = 0; if (attr == 'opacity') { if(json[attr]<2)json[attr]=json[attr]*100; curr = parseInt(parseFloat(igetStyle(obj, attr)) * 100); } else { curr = parseInt(igetStyle(obj, attr)); } //计算速度 var speed = (json[attr] - curr) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //开始赋值 if (attr == 'opacity') { obj.style[attr] = (curr + speed) / 100; } else { obj.style[attr] = curr + speed + 'px'; } //检测停止 if(curr!=json[attr])bestop=false; } //执行停止 if (bestop) { clearInterval(obj.timer); endFn && endFn(); } }, 30) function igetStyle(obj, attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; } }
请注意,json这个变量要按照json的格式来赋值,例如:doMove(oDiv,{width:300,height:300,opacity:0.3},function(){alert(1)})