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

为什么结果没出来，都没有反应

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>JS动画2</title>
<style type="text/css">
*{margin: 0;
padding: 0;
}
#share{
   width: 200px;
   height: 200px;
   background-color:#11FA45 ;
    position: relative;
    left: -200px;
}
#share span{
   width: 60px;
   height: 50px;
   line-height: 50px;
   background-color: #F36812;
   position: absolute;
    text-align: center;
    top:100px;
    right: -60px;
}
</style>
</head>
<body>
   <div id="share">
        <span>分享</span>
    </div>

<script type="text/javascript">
   window.onload=function(){
   var move=document.getElementById("share");
   move.onmouseover=function(){
       startmove();
   }
}
var timer=null;
function startmove(){
   clearInterval(timer);
   var move=document.getElementById("share");
   timer=setInterval(function(){
       if (move.offsetLeft>=0) {
          clearInterval(timer);
       } else{
           move.style.left=move.offsetLeft+10+'px';}
       },30)
       }

</body>
</script>
</html>

周木杉

2015-12-16

源自：JS动画效果 2-1

关注问题我要回答

849

操作

收起

4 回答

一毛钱回答被采纳 +3 积分
2015-12-16

</body>
</script>这块写错了，应该是

</script>

</body>

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

收起回答

周木杉提问者

改过来了还是没有反应

2015-12-16 回复有任何疑惑可以回复我~

周木杉提问者

非常感谢！

2015-12-16 回复有任何疑惑可以回复我~

A潜水的鱼
2016-01-13

将</body>和</script>两个标签互换就可以了

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

收起回答

A潜水的鱼
2016-01-13

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS动画2</title>
<style type="text/css">
*{margin: 0;
padding: 0;
}
#share{
    width: 200px;
    height: 200px;
    background-color:#11FA45 ;
    position: relative;
    left: -200px;
}
#share span{
    width: 60px;
    height: 50px;
    line-height: 50px;
    background-color: #F36812;
    position: absolute;
    text-align: center;
    top:100px;
    right: -60px;
}
</style>
</head>
<body>
    <div id="share">
        <span>分享</span>
    </div>

<script type="text/javascript">
    window.onload=function(){
    var move=document.getElementById("share");
    move.onmouseover=function(){
        startmove();
    }
   move.onmouseout=function(){
        startmout();
    }
}
var timer=null;
function startmove(){
    clearInterval(timer);
    var move=document.getElementById("share");
    timer=setInterval(function(){
        if (move.offsetLeft>=0) {
             clearInterval(timer);
         } else{
            move.style.left=move.offsetLeft+10+'px';}
         },30)
        }
</script>
</body>

</html>

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

收起回答

lynhao
2015-12-16

你的body的问题，把结束标签提出去

<body>
<div id="share">
   <span>分享</span>
</div>

</body>

<script type="text/javascript">
   window.onload=function(){
      var move=document.getElementById("share");
      move.onmouseover=function(){
         startmove();
      }
   }
   var timer=null;
   function startmove(){
      clearInterval(timer);
      var move=document.getElementById("share");
      timer=setInterval(function(){
         if (move.offsetLeft>=0) {
            clearInterval(timer);
         } else{
            move.style.left=move.offsetLeft+10+'px';}
      },30)
   }
</script>

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

收起回答