代碼如下,按照視頻敲了一遍但是動(dòng)不了,求同學(xué)們幫助
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
*{margin:0;padding:0;}
div ul li{
width:200px;height:50px;
background-color:#FF0;
border:1px solid black;
margin-bottom:20px;
opacity:0.3;
filter:alpha(opacity:30);
list-style-type:none;
}
</style>
<script>
window.onload=function(){
var li=document.getElementsByTagName('li');
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
//利用json將屬性和值兩項(xiàng)合在一起
move(this,{width:400,height:100},function(){
move(this,'opacity',1);
});}
/*調(diào)用的函數(shù)有3個(gè)參數(shù),this表示object即當(dāng)前所選對(duì)象,json為所選屬性要達(dá)到的目標(biāo)值,fu()表示鏈接動(dòng)作。*/
li[i].onmouseout=function(){
move(this,{width:200,height:50},function(){
move(this,'opacity',0.3);
});}
}
//通過(guò)getstyle解決邊框BUG,并考慮兼容性
? ? function getStyle(obj,attr){
if(obj.currenStyle){
return obj.currenStyle[attr];
}
else{
return getComputed(obj,false)[attr];
}
}
? ? function move(obj,json,fn){
//立標(biāo)桿,以確定所有屬性都達(dá)到目標(biāo)值
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//第一步取當(dāng)前值
for(var attr in json){
var iCur=0;
if(attr=='opacity'){
/*如果當(dāng)前值為透明度(無(wú)單位,并且為小數(shù)),需要用parseFloat去小數(shù),再用Math.round四舍五入取整來(lái)修正BUG*/
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur=parseInt(getStyle(obj,attr));
}
//第二步 ?求速度
var speed=(json[attr]-iCur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//第三步 運(yùn)動(dòng)過(guò)程
if(iCur!=json[attr]){
//如果不是所有目前值達(dá)到目標(biāo)值,標(biāo)簽不成立,繼續(xù)進(jìn)行運(yùn)動(dòng)
flag=false;
}
if(attr=='opacity'){
//透明度無(wú)單位px,所以單獨(dú)列出并考慮兼容
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();}
}
}//json
},30);
}
}
</script>
</head>
<body>
<div id='x'>
<ul>
<li id='a'></li>
<li id='b'></li>
</ul>
</div>
</body>
</html>
2016-03-30
調(diào)整代碼縮進(jìn)后,看到的第一個(gè)問(wèn)題,getComputedStyle
2016-04-18
親,你的定時(shí)器能關(guān)掉嗎?為什么我按照代碼敲了一遍,后臺(tái)打印檢測(cè)了下,定時(shí)器一直在更新啊??