为了账号安全,请及时绑定邮箱和手机立即绑定

代码如下,按照视频敲了一遍但是动不了,求同学们帮助

<!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>


正在回答

2 回答

      function getStyle(obj,attr){
        if(obj.currenStyle){
          return obj.currenStyle[attr];
        }
        else{
          return getComputedStyle(obj,false)[attr];
        }
      }

调整代码缩进后,看到的第一个问题,getComputedStyle

0 回复 有任何疑惑可以回复我~
#1

code16

2.判断flag是否为true的位置有误 3.move调用的时候fn中this的使用貌似有误(第一个this用得非常好),不过没有找到解决方法,有解决方法的时候请告知我
2016-03-31 回复 有任何疑惑可以回复我~
#2

code16

关于第二点,flag定义的位置也有问题,应该在setInterval的里面 关于第三点,7.1有了答案,可以先定义 var _this = this; 之后使用_this 即可!
2016-03-31 回复 有任何疑惑可以回复我~
#3

小尼采 提问者

非常感谢!
2016-03-31 回复 有任何疑惑可以回复我~
#4

小尼采 提问者 回复 code16

代码缩进是怎么回事?在DW中操作的么?
2016-03-31 回复 有任何疑惑可以回复我~
查看1条回复

亲,你的定时器能关掉吗?为什么我按照代码敲了一遍,后台打印检测了下,定时器一直在更新啊??

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

代码如下,按照视频敲了一遍但是动不了,求同学们帮助

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信