问答详情
源自:4-1 JS多物体动画

请大神帮我看一下哪里错了,鼠标经过没有反应

<html>

<head>

<title>透明度变换</title>

<meta charset="utf-8">

<style type="text/css">

*{

margin: 0px;

padding: 0px;

}


div{

width: 300px;

height: 200px;

background: red;

/*filter: alpha(opacity:30);*/

opacity: 0.3;

float: left;

margin-right: 20px;

}

</style>

<script type="text/javascript">

window.onload=function() {

var oDiv=document.getElementsByTagName('div');

for(var i=0;i<oDiv.length;i++){

//oDiv[i].opacity=0.3;

oDiv[i].onmouseover=function(){

startOver(this,0.9);

}

oDiv[i].onmouseout=function(){

startOver(this,0.3);

}

}

}


function startOver(obj,iTarget){

var obj.timer=null;

obj.timer=setInterval(function(){

var speed=(iTarget-obj.style.opacity)/8;

speed=speed>0?Math.ceil(speed):Math.floor(speed);

if (obj.style.opacity==iTarget) {

clearInterval(obj.timer);

}else{

obj.style.opacity=obj.style.opacity+speed;

}

},30);

}


</script>

</head>

<body>

<div ></div>

<div ></div>

<div ></div>

<div ></div>

</body>

</html>


提问者:qq_后续_0 2017-03-06 10:03

个回答

  • 慕粉1048419981
    2017-03-06 10:54:01

    parseFloat(obj.style.opacity )返回的是一个浮点数,因为opacity是一个0-1的值。

    iTarget-obj.style.opacity算出来也是一个浮点数

    speed=speed>0?Math.ceil(speed):Math.floor(speed);你这里再向上向下取整就变成了0 1,所以肯定不会有变化。

    把输入的参数变成90  再在var speed 前做一个判断   如果是opacity就用  iTarget-(parseFloat(obj.style.opacity))*10   然后再取整就没问题了,后面的部分自己注意一下调整吧。