js運動kuaji
阿新 • • 發佈：2018-12-26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈式運動</title>
<style>
#div1{width: 100px;height: 100px;background: red;filter(alpha(opacity: 30));opacity: 0.3;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(this,"width",200,function(){
startMove(oDiv,"height",200,function(){
startMove(oDiv,"opacity",100);
});
});
}
oDiv.onmouseout = function(){
startMove(this,"opacity",30,function(){
startMove(oDiv,"height",100,function(){
startMove(oDiv,"width",100);
});
});
}
}
//獲取元素屬性值
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//運動函式
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//1.獲取當前值
var iCur = 0;
/*
獲取當前值時，對透明度進行特殊的處理，
特別要注意對透明度小數的處理
*/
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
//2.獲取速度
var iSpeed = (iTarget - iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//3.檢測停止
if(iCur == iTarget){
clearInterval(obj.timer);
//鏈式運動判斷
if(fn){
fn();
}
}else{
if(attr == "opacity"){
obj.style.filter = "alpha(opacity:"+iCur+iSpeed+")";
obj.style.opacity = (iCur + iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + "px";
}
}
},30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>