                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

没有透明度改变的效果，求大神答疑解惑，万分感谢

<!DOCTYPE html>

<html>

<head>

<title>opacity</title>

#div1{

height: 200px;

width: 200px;

background-color:red;

filter:alpha(opacity:20);

opacity: 0.2;

}

</style>

</head>

<body>

window.onload=function() {

var oDIV=document.getElementById("div1");

oDIV.onmouseover=onMove(100);

oDIV.onmouseout=onMove(20);

}

var oDIV=document.getElementById("div1");

var timer=null;

var alpha=20;

var speed=0;

function onMove(iTarget){

clearInterval(timer);

timer=setInterval(function(){

if (alpha>iTarget) {

speed=-10;

} else{

speed=10;

}

if (alpha==iTarget) {

clearInterval(timer);

}

else{

alpha+=speed;

oDIV.style.filter="alpha(opacity:"+alpha+")";

oDIV.style.opacity=alpha/100;

}

},30)

}

</script>

</body>

</html>

张筱诺8983

2015-12-09

源自：JS动画效果 2-2

关注问题我要回答

857

操作

收起

3 回答

木子舟义
2015-12-09

我真不知道上面那些人是在回答些什么。代码不看就说浏览器不支持？帮你改了一下。不理解可以问

<!DOCTYPE html>
<html>

<head>
    <title>opacity</title>
    <style type="text/css">
    #div1 {
        height: 200px;
        width: 200px;
        background-color: red;
        filter: alpha(opacity: 20);
        opacity: 0.2;
    }
    </style>
</head>

<body>
    <div id="div1"></div>
    <script>
    window.onload = function() {
        var oDIV = document.getElementById("div1");
        oDIV.onmouseover = function(){onMove(100);}
        oDIV.onmouseout = function(){onMove(20);}
    }
    var oDIV = document.getElementById("div1");
    var timer = null;
    var alpha = 20;

    function onMove(iTarget) {
        clearInterval(timer);
        var speed = 0;
        timer = setInterval(function() {
            if(alpha >= iTarget) {
                speed = -10;
            } else{
            	speed = 10;
            }

            if (alpha == iTarget) {
                clearInterval(timer);
            } else {
                alpha += speed;
                oDIV.style.filter = "alpha(opacity:" + alpha + ")";
                oDIV.style.opacity = alpha / 100;
            }
        }, 30)
    }
    </script>
</body>

</html>

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

收起回答

张筱诺8983 提问者

恩恩，应该是我直接写的oDIV.onmouseover=onMove(100);和 oDIV.onmouseout=onMove(20);没有写function和中括号的原因，这样写：oDIV.onmouseover = function(){onMove(100);}和 oDIV.onmouseout = function(){onMove(20);}就对了，大神这里必须写中括号吗？