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>
js 缓冲运动
原文地址：https://www.cnblogs.com/fumo/p/9277320.html