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

透明度没有改变

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

margin: 0px;

padding: 0px;

}

#div1{

width: 200px;

height: 180px;

background: red;

filter: alpha(opacity:30);

opacity: 0.3;

}

</style>

window.noload=function(){

var odiv=Document.getElementById('div1');

odiv.onmouseover=function(){

starmove(100);

}

odiv.onmouseout=function(){

starmove(30);

}

var timer = null;

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+=speed;

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

odiv.style.filter = "alpha(opacity:‘+alpha+')";

odiv.style.opacity = alpha/100;

}

},30)

}

</script>

</head>

<body>

</body>

</html>

man豪

2016-03-16

源自：JS动画效果 2-2

关注问题我要回答

759

操作

收起

5 回答

呆4 回答被采纳 +3 积分
2016-03-17

整体没问题，但里面的小错误太多了，这是给你修改后的代码，自己去对照找一下错误吧。

<!DOCTYPE html>

<html>

<head>

   <meta charset="UTF-8">

   <title>Document</title>

   <style>

    *{

     margin: 0px;

     padding: 0px;

    }

    #div1{

     width: 200px;

     height: 180px;

     background: red;

     filter: alpha(opacity:30);

     opacity: 0.3;

    }

</style>

   <script>

window.onload=function(){

var odiv=document.getElementById('div1');

odiv.onmouseover=function(){

starmove(100);

}

odiv.onmouseout=function(){

starmove(30);

}

}

        var timer = null;

        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+=speed;
console.log(alpha);

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

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

                    odiv.style.opacity = alpha/100;

}

},30)

}

</script>

</head>

<body>

   <div id="div1"></div>

</body>

</html>