代码如下,按照视频敲了一遍但是动不了,求同学们帮助
<!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>无标题文档</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将属性和值两项合在一起
move(this,{width:400,height:100},function(){
move(this,'opacity',1);
});}
/*调用的函数有3个参数,this表示object即当前所选对象,json为所选属性要达到的目标值,fu()表示链接动作。*/
li[i].onmouseout=function(){
move(this,{width:200,height:50},function(){
move(this,'opacity',0.3);
});}
}
//通过getstyle解决边框BUG,并考虑兼容性
function getStyle(obj,attr){
if(obj.currenStyle){
return obj.currenStyle[attr];
}
else{
return getComputed(obj,false)[attr];
}
}
function move(obj,json,fn){
//立标杆,以确定所有属性都达到目标值
var flag=true;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//第一步取当前值
for(var attr in json){
var iCur=0;
if(attr=='opacity'){
/*如果当前值为透明度(无单位,并且为小数),需要用parseFloat去小数,再用Math.round四舍五入取整来修正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);
//第三步 运动过程
if(iCur!=json[attr]){
//如果不是所有目前值达到目标值,标签不成立,继续进行运动
flag=false;
}
if(attr=='opacity'){
//透明度无单位px,所以单独列出并考虑兼容
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>