求大神看看怎么没反应-慕课网

求大神看看怎么没反应

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

李李晨晨

2016-06-12 13:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

padding:0;

margin:0;

}

#div1{

width:200px;

height:200px;

background-color:red;

filter:Alpha(opactiy=30);

opacity:0.3;

}

</style>

window.onload=function(){

var odiv=document.getElementById(div1);

odiv.onmouseover=function(){

starmove(100)

}

odiv.onmouseout=function(){

starmove(30)

}

var timer;

var alpha=30;

function starmove(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){

clearInterval(timer);

}else{

alpha=alpha+speed;

odiv.style.filter="alpha(opactiy:alpha)";

odiv.style.opactiy=alpha/100;

}},30)

}

</script>

</head>

<body>

</div>

</body>

</html>

写回答关注

2回答

qq_幸福不缺氧_03691061

2016-08-12 21:43:24

上楼已经说得很清楚了哦，需要在这一句做修改 obj.style.filter='alpha(opacity:'+alpha+')';
这里需要将变量alpha 给对象的filter；最后个人觉得需要，obj.style.opacity=parseFloat(alpha/100);

0 0

qq_相顾无言_8: 2016-06-12 14:55:40

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,div{
                margin: 0;
                padding: 0;
            }
            #div1{
                height: 200px;
                width: 200px;
                background: red;
                opacity: 0.3;
                filter: alpha(opacity:30);
            }
        </style>
        <script>
            window.onload=function(){
                var odiv=document.getElementById('div1');
                odiv.onmousemove=function(){
                    startMove(100);
                }
                odiv.onmouseout=function(){
                    startMove(30);
                }
            }
            var timer=null;
            var alpha=30;
            function startMove(iTarget){
                clearInterval(timer);
                var odiv=document.getElementById('div1');
                
                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+')'//基于IE的
                    odiv.style.opacity=alpha/100;}
                },30)
            }
        </script>
    </head>
    <body>
        <div id="div1">
            
        </div>
    </body>
</html>

0 0

JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题

求大神帮忙看看

回答 1

求大神帮忙看看

回答 2

求大神进来看看

回答 1

求大神帮忙看看为什么没效果

回答 1

求大神看看我的为啥没效果

回答 1

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