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

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

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



正在回答

3 回答

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

<!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 回复 有任何疑惑可以回复我~
#1

张筱诺8983 提问者

恩恩,应该是我直接写的oDIV.onmouseover=onMove(100);和 oDIV.onmouseout=onMove(20);没有写function和中括号的原因,这样写:oDIV.onmouseover = function(){onMove(100);}和 oDIV.onmouseout = function(){onMove(20);}就对了,大神这里必须写中括号吗?
2015-12-09 回复 有任何疑惑可以回复我~

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

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

张筱诺8983 提问者

谢谢啦,试过啦不是这个原因
2015-12-09 回复 有任何疑惑可以回复我~

浏览器不支持这个 透明

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

张筱诺8983 提问者

谢谢您啦,我换了好几个浏览器的,应该是触发事件时候没有加中括号的原因,那个改了就能运行了
2015-12-09 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

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

进入课程

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

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