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

我在控制台查看属性都跑的了, 就是他的效果不显示,很郁闷呀求救

<!DOCTYPE html>

<head>

*{margin:0;

padding:0;

}

#div1 {

width: 200px;

height: 200px;

background: red;

filter:alpha(opactiy:100);

opacity: 1;

}

</style>

window.onload=function(){

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

oDiv.onmouseover = function(){

starFilter(10);

}

oDiv.onmouseout = function(){

starFilter(100);

}

var timer = null,

alpha = 100;

function starFilter(iTarget){

clearInterval(timer);

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

timer = setInterval(function(){

var speed = 0;

if (alpha<iTarget) {

speed = 10;

}else{

speed = -10;

}

if(alpha == iTarget){

clearInterval(timer);

}else{

alpha+=speed;

oDiv.style.filter = 'alpha(opactiy:'+alpha+')';

oDiv.style.opactiy = alpha/100;

console.log(oDiv.style.opactiy);

}

},30)

}

</script>

</head>

<body>

</div>

</body>

</html>

qq__1331

2017-08-07

源自：JS动画效果 2-2

关注问题我要回答

1102

操作

收起

4 回答

夜阑卧听风吹雨y
2018-06-21

不知道为什么复制的代码出现很多变成中文了，opacity才是正确的。

<!DOCTYPE html>

<html>

<head>

*{padding: 0;margin: 0;}

#div1{

width:200px;

height:200px;

background:red;

filter:alpha(opacity:30);//透明度30

opacity:0.3;

}

</style>

window.onload = function ()

{

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

oDiv.onmouseover = function()

{

startMove(100);//鼠标移上去触发透明度100

}

oDiv.onmouseout = function()

{

startMove(30);//鼠标移开触发透明度30

}

var timer = null;

var alpha = 30;

function startMove(iTarget)

{

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

clearInterval(timer);

timer = setInterval(function()

{

var speed = 0;//速度

if(alpha > iTarget)

{ speed = -10;}

else

{ speed = 10;}

if(alpha == iTarget)//iTarget目标

{clearInterval(timer);}//关闭定时器

else

{

alpha += speed;

oDiv.style.filter = 'alpha(opacity:'+ alpha + ')';

oDiv.style.opacity = alpha/100;

}

},30);

}

</script>

</head>

<body>

</body>

</html>

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

收起回答

夜阑卧听风吹雨y
2018-06-21

1、oDiv.style.filter = 'alpha(opactiy:'+alpha+')';

文中的opactiy这个代码都写错了，应该这样写opacity。

2、starFilter(10);老师写的是startMove;

3、正确的代码是这样的，你可以自己对比下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>透明度</title>
    <style type="text/css">
 *{padding: 0;margin: 0;}
        #div1{
            width:200px;
 height:200px;
 background:red;
 filter:alpha(opacity:30);//透明度30
 opacity:0.3;
 }
    </style>
    <script >
 window.onload = function ()
        {
           var oDiv=document.getElementById("div1");
 oDiv.onmouseover = function()
           {
               startMove(100);//鼠标移上去触发透明度100
 }
           oDiv.onmouseout = function()
           {
               startMove(30);//鼠标移开触发透明度30
 }
        }
        var timer = null;
 var alpha = 30;
 function startMove(iTarget)
        {
            var oDiv=document.getElementById("div1");
 clearInterval(timer);
 timer = setInterval(function()
            {
                var speed = 0;//速度
 if(alpha > iTarget)
                  { speed = -10;}
                else
 { speed = 10;}
               if(alpha == iTarget)//iTarget目标
 {clearInterval(timer);}//关闭定时器
 else
 {
                   alpha += speed;
 oDiv.style.filter = 'alpha(opacity:'+ alpha + ')';
 oDiv.style.opacity = alpha/100;
 }
            },30);
 }
    </script>
</head>
<body>
 <div id="div1"></div>
</body>
</html>