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

求大神看看怎么没反应

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

李李晨晨

2016-06-12

源自：JS动画效果 2-2

关注问题我要回答

596

操作

收起

2 回答

qq_幸福不缺氧_03691061
2016-08-12

上楼已经说得很清楚了哦，需要在这一句做修改 obj.style.filter='alpha(opacity:'+alpha+')';

这里需要将变量alpha 给对象的filter；最后个人觉得需要，obj.style.opacity=parseFloat(alpha/100);

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

收起回答

qq_相顾无言_8
2016-06-12

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