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

如何把两个按钮合并成一个，按一下出去，再按一下返回

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{width:200px;
height:200px;
background:red;
position:absolute;
left:0;
top:200px;
}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById("star");
	var oDiv=document.getElementById("back");
	star.onclick= function(){
  starmove(300);
}
 back.onclick= function(){
  starback(0);
}
}

	var timer=null
	
function starmove(iTarget){
	clearInterval(timer);
	 var oDiv=document.getElementById("div1");
	 timer=setInterval(function(){
		     if(oDiv.offsetLeft<300){
				  oDiv.style.left = oDiv.offsetLeft+10+"px";
    
    }else {
      clearInterval(timer);
	}
	
		 
		 },30)
}
function starback(iTarget){
	clearInterval(timer);
	 var oDiv=document.getElementById("div1");
	 timer=setInterval(function(){
		     if(oDiv.offsetLeft>0){
				  oDiv.style.left = oDiv.offsetLeft-10+"px";
    
    }else {
      clearInterval(timer);
	}
	
		 
		 },30)
}
</script>
<body>
<input  id="star" type="button" value="开始"/>
<input  id="back" type="button" value="返回"/>
<div id="div1">
</div>
</body>
</html>

狂四郎

2016-12-14

源自：JS动画效果 2-1

关注问题我要回答

2050

操作

收起

2 回答

慕数据5775487 回答被采纳 +3 积分
2016-12-14

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{width:200px;
height:200px;
background:red;
position:absolute;
left:0;
top:200px;
}
</style>
<script>
window.onload=function(){
    var oDiv=document.getElementById("star");
    var oDiv=document.getElementById("back");
    star.onclick= function(){
  starmove(300);
}
    
 back.onclick= function(){
  starback(0);
}
}
 
    var timer=null
     
function starmove(iTarget){
    clearInterval(timer);
     var oDiv=document.getElementById("div1");
     timer=setInterval(function(){
     	var star=document.getElementById('star');
    
             if(oDiv.offsetLeft<300){
                  oDiv.style.left = oDiv.offsetLeft+10+"px";
     				star.id="back";
     				var back=document.getElementById('back');
     				back.value='返回';
    }else {
      clearInterval(timer);
    }
     
          
         },30)
}
function starback(iTarget){
    clearInterval(timer);
     var oDiv=document.getElementById("div1");
     timer=setInterval(function(){
             if(oDiv.offsetLeft>0){
                  oDiv.style.left = oDiv.offsetLeft-10+"px";
     
    }else {
      clearInterval(timer);
    }
     
          
         },30)
}
</script>
<body>
<input  id="star" type="button" value="开始"/>

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

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

收起回答

狂四郎提问者

非常感谢！

2016-12-15 回复有任何疑惑可以回复我~

慕数据5775487
2016-12-14

这样可以解决不能返回的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#div1{width:200px;
height:200px;
background:red;
position:absolute;
left:0;
top:200px;
}
#back{
	display:none;
}
</style>
<script>
window.onload=function(){
    star.onclick= function(){
  starmove(300);
}
    
 back.onclick= function(){
  starback(0);
}

 
    var timer=null
     
function starmove(iTarget){
    clearInterval(timer);
     var oDiv=document.getElementById("div1");
     timer=setInterval(function(){
     	var star=document.getElementById('star');
    
             if(oDiv.offsetLeft<300){
                  oDiv.style.left = oDiv.offsetLeft+10+"px";
     				var back=document.getElementById('back');
     				var star=document.getElementById('star');
     				star.style.display='none';
     				back.style.display='block';
     				
    }else {
      clearInterval(timer);
    }
     
          
         },30)
}
function starback(iTarget){
    clearInterval(timer);
     var oDiv=document.getElementById("div1");
     timer=setInterval(function(){
             if(oDiv.offsetLeft>0){
                  oDiv.style.left = oDiv.offsetLeft-10+"px";
     				var back=document.getElementById('back');
     				var star=document.getElementById('star');
     				star.style.display='block';
     				back.style.display='none';
    }else {
      clearInterval(timer);
    }
     
          
         },30)
}
}
</script>
<body>
<input  id="star" type="button" value="开始" />
<input id="back" type="button" value="返回" />
<div id="div1">
</div>
</body>
</html>

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

收起回答