求助滑块运动问题!!!!

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

qq_淡淡微光的我_03415024

2016-06-04 21:10

下面这段代码到底哪里错了,为什么它不会停止,而是一直滑动,求解

window.onload=function(){

var check=document.getElementById("check");

  check.onmouseover=function(){

  startMove(1,0);}

  check.onmouseout=function(){

  startMove(1,-100);}

  }

  var time=null;

  function startMove(speed,target){

    var box=document.getElementById("box");

clearInterval(time);

time=setInterval(function(){

if(box.offsetLeft==target)

clearInterval(time);

else

box.style.left=box.offsetLeft+speed+"px";

},30);

  } 

  


写回答 关注

4回答

  • 陈国栋0
    2016-06-05 12:45:41

    if else 语句错了,else后面没加花括号.

  • 掐了烟来骚
    2016-06-04 22:43:55

    抱歉,第二个请忽略,回复错了

  • 掐了烟来骚
    2016-06-04 22:40:08
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<style>
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		a{
    			text-decoration: none;
    		}
    		div {
    			width:475px;
    			background:#eeeeee;
    			margin:auto;
    			text-align: center;
    		}
    		#main {			
    			display: block;			
    			margin:auto;
    		}
    		#main li {
    			display: inline;
    		}
    		li:nth-child(2){
    			position: relative;
    		}
    		#child {
    			position: absolute;
    			top: 100%;
    			left: 0;
    			display: none;
    		}
    
    		li:nth-child(2):hover #child{
    			display: block;
    			background:#eeeeee; 
    		}
    		</style>
    	</head>
    	<div>
    		<ul id="main">
    			<li >
    				<a href="#">首页</a>
    			</li>
    			<li>
    				<a href="#">课程大厅</a>
    				<ul id="child">
    					<li><a href="#">javaScript</a></li>
    					<li><a href="#">JQuery</a></li>
    				</ul>
    			</li>
    			
    			<li><a href="#">学习中心</a></li>
    			<li><a href="#">经典案例</a></li>
    			<li><a href="#">关于我们</a></li>
    		</ul>
    	</div>
    </body>
    </html>


  • 掐了烟来骚
    2016-06-04 22:08:57

    window.onload=function(){

    var check=document.getElementById("check");

      check.onmouseover=function(){

      startMove(1,0);}

      check.onmouseout=function(){

      startMove(1,-100);}

      }

      var time=null;

      function startMove(speed,target){

        var box=document.getElementById("box");

    clearInterval(time);

    time=setInterval(function(){


    if(box.offsetLeft==target){

    clearInterval(time);}

    else{

    box.style.left=box.offsetLeft+speed+"px";}

    },30);

      } 


JS动画效果

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

113925 学习 · 1443 问题

查看课程

相似问题