??<!DOCTYPE?HTML>
<html>??
<head>??
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>??
<title>鏈式運動框架</title>
<style?type="text/css">
body,ul,li{
margin:?0;
padding:?0;
}
ul,li{
list-style:?none;
}
ul?li{
width:?200px;
height:?100px;
background:?yellow;
margin-bottom:?20px;
border:4px?solid?#000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script?src="move.js"></script>
<script>
window.onload=function(){
var?Li=document.getElementById('li1');
Li.onmouseover=function(){
startMove(Li,'width',400);
}
}
</script>
</head>
<body>
<ul>
<li?id="li1"></li>
</ul>
</body>
</html>
---------
//獲取樣式
function?getStyle(obj,attr){
if(obj.currentStyle){
return?obj.currentStyle[attr];?//?if?IE
}
else{
return?getComputedStyle(obj,false)[attr];?//if?FireFox
}
}
function?startMove(obj,attr,iIarget){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
//取當前的值
var?icur?=?0;
if(attr?==?'opacity'){
icur=?Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
icur=?parseInt(getStyle(obj,attr));
}
//算速度
var?speed?=(iTarget-icur)/8;
speed?=?speed>0???Math.ceil(speed)?:?Math.floor(speed);
//檢測停止
if(icur==?iTarget){
clearInterval(obj.timer);
//判斷是否傳入了fn
//if(fn){
//fn();
//}
}else{
if(attr?==?'opacity'){
obj.style.filter?=?'alpha:(opacity:'?+?icur+speed?+?')';
obj.style.opacity?=?(icur+speed)/100;
}
else{
obj.style[attr]?=?icur?+?speed?+"px";
}
}
},30);
};
2016-04-04
上傳問題前建議自己認認真真仔仔細細的檢查多遍。
第51行！iTarget你打成了iIerget！
這樣運行的時候當然是找不到下面的iTarget的。