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

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

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

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

qq__1331

2017-08-07 20:17

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

写回答关注

4回答

夜阑卧听风吹雨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 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 0

夜阑卧听风吹雨y

2018-06-21 16:27:18

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

1 0

夜阑卧听风吹...

写错了

2018-06-21 16:29:23

共 1 条回复 >
qq__1331

2017-08-07 20:42:45

有没有人呀

0 0

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题

郁闷的很呐

回答 1

控制台不报错，程序结果不显示运动，这是怎么了？

回答 1

制作获取属性的方法的时候总是效果不对？

回答 1

求救呀不知道哪里错了

回答 1

跑起来了，但是为什么没有停下来啊？求救啊，求救。

回答 4

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