问答详情
源自：2-2 JS透明度动画

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

<!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=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 00:41

个回答

  • 木子舟义
    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>


    0
  • xufeng123456
    2015-12-09 09:14:22

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

    0
  • echo_kinchao
    2015-12-09 09:08:01

    浏览器不支持这个 透明

    0