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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">


<head>

<title>拖动</title>

<meta charset="utf-8"> 

<style type="text/css">

*{margin:0;

  padding:0;

 }

#div1 {

width: 200px;

height: 200px;

background: red;

filter:alpha(opactiy:100);

opacity: 1;

}

</style>

<script type="text/javascript">

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 id="div1">

</div>

</body>

</html>


提问者：qq__1331 2017-08-07 20:17

个回答

  • 夜阑卧听风吹雨y
    2018-06-21 16:58:56

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

    <!DOCTYPE html>

    <html>

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


    0
  • 夜阑卧听风吹雨y
    2018-06-21 16:56:01

    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>


    0
  • 夜阑卧听风吹雨y
    2018-06-21 16:27:18

    你的这些中文什么。。。。，麻烦写的规范，注释用//,其他不要出现中文，

    0
  • qq__1331
    2017-08-07 20:42:45

    有没有人呀


    0