您的位置：首页 > 其它

运动框架

2016-12-16 00:00 330 查看

运动框架演变过程

startMove(iTarget) 运动框架

startMove(obj, iTarget) 多物体

startMove(obj, attr, iTarget) 任意值

startMove(obj, attr, iTarget, fn) 链式运动

startMove(obj, json) 多值运动

startMove(obj, json, fn) 完美运动框架

运动框架

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style> * {margin: 0;padding: 0;} #test{width:100px;height:100px;background:red;position:absolute;}
</style>
<script> window.onload = function() { var oDiv1=document.getElementById('test'); oDiv1.onclick=function(){ this.timer=null; clearInterval(this.timer) this.timer=setInterval(function(){ if(oDiv1.offsetLeft==300){ clearInterval(this.timer) }else{ oDiv1.style.left=oDiv1.offsetLeft+5+"px"; } },30) } } </script>
</head>

<body>
<div id="test"></div>
</body>

</html>

缓冲运动

　　　　function startMove(obj,target){ clearInterval(obj.timer) obj.timer=setInterval(function(){ var speed=(target-obj.offsetLeft)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed); //缓冲运动的速度一定要取整 if(obj.offsetLeft==target){ //两点重合就清除定时器 clearInterval(obj.timer) }else{ obj.style.left=obj.offsetLeft+speed+"px"; } },30) }

完美运动

function getStyle(obj,attr){return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr]}
//startMove(oDiv, {width: 400, height: 400})

function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true;        //假设：所有值都已经到了

for(var attr in json) { var cur=0; // 获取当前值 if(attr=='opacity') { cur=Math.round(parseFloat(getStyle(obj, attr))*100)||0; } else { cur=parseInt(getStyle(obj, attr))||0; } var speed=(json[attr]-cur)/6;   //算速度
speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) //检测停止：如果当前的值不等于目标值就不清除定时器 bStop=false; if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100;
} else { obj.style[attr]=cur+speed+'px'; } } if(bStop) { clearInterval(obj.timer); fnEnd&&fnEnd.call(obj); } }, 30); }

多物体的运动

function startMove(obj, attr, iTarget, iSpeed) { clearInterval(obj.iTimer); var iCur = 0; obj.iTimer = setInterval(function() { if (attr == 'opacity') { iCur = Math.round(css( obj, 'opacity' ) * 100); } else { iCur = parseInt(css(obj, attr)); } if (iCur == iTarget) { clearInterval(obj.iTimer); } else { if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

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

标签：

相关文章推荐

新的分享

章节导航