运动框架演变过程
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];
}
}