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

这样不行...哪错了？

body,#div1{

margin:0px;

padding:0px;

}

#div1{

width:200px;

height:200px;

background:red;

opacity:0.3;

}

</style>

window.onload = function(){

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

div.onmouseover= function(){

var timer = setInterval(function(){

clearInterval(timer);

div.style.opacity += 0.1;

if(div.style.opacity == 1){

clearInterval(timer);

}

},30)

}

div.onmouseout= function(){

var timer = setInterval(function(){

clearInterval(timer);

div.style.opacity-=0.1;

if(div.style.opacity == 0.3){

clearInterval(timer);

}

},30)

}

qq_e累_0

2015-11-05

源自：JS动画效果 2-2

关注问题我要回答

638

操作

收起

1 回答

李晓健
2015-11-05

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     body,#div1{
         margin:0px;
         padding:0px;
    }
     #div1{
         width:200px;
         height:200px;
         background:red;
     }
 </style>
</head>
<body>
<div id="div1" style="opacity: 0.3"></div>
<script type="text/javascript">
window.onload = function() {
     var div = document.getElementById('div1');
     var timmer,timmer2;

     div.onmouseover = function () {
         timer = setInterval(function () {
             if (div.style.opacity == 1) {
                 clearInterval(timer);
                 return;
              }
             div.style.opacity = (div.style.opacity*10+1)/10;
          }, 30)
    }
     div.onmouseout = function () {
         timer2 = setInterval(function () {
             if (div.style.opacity == 0.3) {
                 clearInterval(timer2);
                 return;
             }
             div.style.opacity = (div.style.opacity*10-1)/10;
        }, 30)
    }
}
</script>
</body>
</html>

不知道这是不是你想要的效果。

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

收起回答

qq_e累_0 提问者

对就是这个... 绝大多次自己着手编代码都没成功~ /(ㄒoㄒ)/~~

2015-11-05 回复有任何疑惑可以回复我~

qq_e累_0 提问者

我该怎么办啊老师~~~~~~

2015-11-05 回复有任何疑惑可以回复我~

李晓健回复 qq_e累_0 提问者

多写写就好了

2015-11-05 回复有任何疑惑可以回复我~

0/150

提交

取消

JS动画效果

参与学习 113923 人
解答问题 1443 个

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

进入课程

本课相似问答

2 回答不知道哪错了，就是运行不出来

1 回答我一直查不出我哪里错了。运行不出来

5 回答不知道哪里错了，动不了~

1 回答不知道错在哪了??

3 回答搞不懂哪里错了。。。

搜索更多本课相关问答

这样不行...哪错了？

我要回答关注问题

热搜

最近搜索清空

这样不行...哪错了？

1 回答

本课相似问答

这样不行...哪错了？