js完美运动框架
完美运动框架js文件及说明
/*调用说明 node为节点 json为要变化的的属性组成的对象 例{width:300,height:200,opacity:30} 意思为要 让node节点对象 宽变化到300px，高变化到200px，不透明度变化到30。 complete 为当json对象的各项属性都变化到位时,需要执行什么。这里 传入函数。一般为匿名函数。也可以在匿名函数里在调用startMove()函数； 【注】这个参数为可选的,如果不写就代表结束，什么都不执行。 示例1 function(){alert(1)} //这样json对象的各项属性 都变化到位时，在浏览器警告框中输出1。 示例2 function(){startMove(node, json, complete)} //这样 写的意思是当上一个运动结束时在进行这一次运动。 综合示例： aDivs[i].onmouseover = function(){ startMove(aDivs[0], { width:200, //宽度变为200px，不透明度变到30% opacity: 30 },function(){//上一个运动完成后，让高变为200px startMove(aDivs[0], { height:200 },function(){//在上一运动完成后，让左边距增加到100px startMove(aDivs[0],{ marginLeft:100 }) }) });//最后一个startMove()函数没有complete形参， //所以结束 */ //用的时候直接把代码拷走，调用即可，然后根据需要传参。 /*------------------完美运动框架------------------*/ function startMove(node, json, complete){ //complete = show clearInterval(node.timer); node.timer = setInterval(function(){ var isEnd = true; //假设都到达目的值了。 for(var attr in json){ //1、获取当前的值 var iCur = null; if(attr == "opacity"){ iCur = parseInt(parseFloat(getStyle(node, attr)) * 100); }else{ iCur = parseInt(getStyle(node, attr)) } //2、计算速度 var speed = (json[attr] - iCur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3、运动和停止分开 if(attr == "opacity"){ iCur += speed; node.style.opacity = iCur / 100; node.style.filter = "alpha(opacity=" + iCur + ")"; }else{ node.style[attr] = iCur + speed + "px"; } //如果这个if语句成立，说明至少有一个样式没到达目的值 if(json[attr] != iCur){ isEnd = false; } } if(isEnd){ clearInterval(node.timer); if(complete){ complete(); } } }, 30); } //获取当前有效样式的兼容写法 function getStyle(obj, attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj)[attr]; } } /*------------------完美运动框架-end-----------------*/
调用示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用运动动框架</title>
<style>
div {width: 100px;height:100px;background:black;}
</style>
<script src="tool-YDKJ.js">//引入上面封装的完美运动框架</script>
<script>
window.onload = function(){
var aDivs = document.getElementsByTagName('div');
for(var i = 0; i < aDivs.length; i++){
//鼠标移入
aDivs[i].onmouseover = function(){
startMove(aDivs[0], {
width:200, //宽变到200px，不透明度变到30%
opacity: 30
},function(){
startMove(aDivs[0], {//上一运动结束后，高变为200px
height:200
},function(){
startMove(aDivs[0],{//再上一个运动后左边距增加到100
marginLeft:100
})
})
});
}
//鼠标移除
aDivs[i].onmouseout = function(){
startMove(aDivs[0], {//宽变恢复到100px，不透明度恢复到100%
width:100,
opacity: 100
},function(){
startMove(aDivs[0], {//上一运动结束后，高恢复到100px
height:100
},function(){
startMove(aDivs[0],{//再上一个运动后左边距恢复到0
marginLeft:0
})
})
});
}
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>
浏览器效果：
