Ps：此代碼在慕課網上有詳解（http://www.imooc.com/video/3181）
先放代碼
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } /*window.onload=function(){ var ali=document.getElementsByTagName('li'); for(var i=0;i<ali.length;i++){ ali[i].timer=null; ali[i].onmouseover=function(){ stratMove(this,'opacity',100); } ali[i].onmouseout=function(){ stratMove(this,'opacity',20); } } }*/ function stratMove(obj,json,fn){ var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for( var attr in json){ //1.取數值 var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else { icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/8;//8爲比例係數 speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.檢測停止 if(icur!=json[attr]) { flag=false; } /* clearInterval(obj.timer); if (fn){ fn(); } }*/ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; } else { obj.style[attr]=icur+speed+'px'; } if(flag){ clearInterval(obj.timer); if (fn){ fn(); } } }},30) }
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="move.js"></script>
<script language="JavaScript">
window.onload=function() {
var li = document.getElementById('li1');
li.onmouseover = function () {
stratMove(li, {'width':400,'height':200})
}
li.onmouseout = function () {
stratMove(li, {'width':200,'height':100})
}
}
</script>
<title>Title</title>
<style type="text/css">
li{
width: 200px;
height: 100px;
background-color: yellow;
border: 2px solid;
}
</style>
</head>
<body>
<ul>
<li id="li1">
</li>
</ul>
</body>
</html>
略解：
1.
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
這個是判斷瀏覽器返回樣式的函數，IE瀏覽器不支持getComputedStyle的返回，這個函數使move.js兼容IE。
2.
function stratMove(obj,json,fn){
var flag=true;
clearInterval(obj.timer); //防止鼠標重新激活此函數後造成的速度疊加
obj.timer=setInterval(function(){
for( var attr in json){
//1.取數值
var icur=0;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else {
icur=parseInt(getStyle(obj,attr));
}//透明度參數和長短參數類型不同
//2.算速度
var speed=(json[attr]-icur)/8;//8爲比例係數，正數爲向右移動，負數爲向左移動
speed=speed>0?Math.ceil(speed):Math.floor(speed);//速度除不盡，會造成到不了target的情況。
//3.檢測停止，這有防止json中完成了一個值的變動後便停止了運動
if(icur!=json[attr]) {
flag=false;
}
if(attr=='opacity'){//透明度與長短參數值不同
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}
else {
obj.style[attr]=icur+speed+'px';
}
if(flag){
clearInterval(obj.timer);
if (fn){
fn();
}
}
}},30)
}