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

首页课程实战体系课手记专栏慕课教程

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

来源：2-2 JS透明度动画

张筱诺8983

2015-12-09 00:41

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

写回答关注

3回答

木子舟义: 2015-12-09 09:50:55

已采纳

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

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

1 0

张筱诺898...

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

2015-12-09 12:53:26

共 1 条回复 >

xufeng123456

2015-12-09 09:14:22

filter:alpha(opacity=20); /* IE 浏览器支持 */ ;
-moz-opacity:0.4; /* 遨游浏览器火狐浏览器支持 */ ;
opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/”>

1 0

张筱诺898...

谢谢啦，试过啦不是这个原因

2015-12-09 12:54:49

共 1 条回复 >
echo_kinchao

2015-12-09 09:08:01

浏览器不支持这个透明

1 0

张筱诺898...

谢谢您啦，我换了好几个浏览器的，应该是触发事件时候没有加中括号的原因，那个改了就能运行了

2015-12-09 12:56:27

共 1 条回复 >

JS动画效果

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

113910 学习 · 1502 问题

查看课程

相似问题

不能改变宽度，鼠标放上去，改变的还是透明度，大神求解！

回答 1

透明度没有改变

回答 5

透明度没有变化，请大神指教

回答 1

透明度的改变

回答 1

改变透明度

回答 1

打开慕课网App查看更多内容