                        課程
                    
                        /前端開發(fā)
                        
                            /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>

?? ?body,div,span{
?? ??? ?margin:0;
?? ??? ?padding:0;
?? ?}
?? ?#div1{
?? ??? ?width:200px;
?? ??? ?height:200px;
?? ??? ?background:red;
?? ??? ?position:relative;
?? ??? ?left:-200px;
?? ??? ?top:0;
?? ?}
?? ?#share{
?? ??? ?width:20px;
?? ??? ?height:50px;
?? ??? ?background:blue;
?? ??? ?position:absolute;
?? ??? ?left:200px;
?? ??? ?top:75px;
?? ?}
</style>

<script>
?? ?window.onload=function(){
?? ??? ?var oDiv=document.getElementById('div1');
?? ??? ?oDiv.onmouseover=function(){
?? ??? ??? ?startMove();
?? ??? ?}
?? ??? ?oDiv.onmouseout=function(){
?? ??? ??? ?startMove1();
?? ??? ?}
?? ?}
?? ?var timer=null;
?? ?
?? ?function startMove(){
?? ??? ?clearInterval(timer);//防止每次鼠標經(jīng)過的時候都要出發(fā)定時器
?? ??? ?var oDiv=document.getElementById('div1');
?? ??? ?setInterval(function(){//定時器
?? ??? ??? ?if(oDiv.offsetLeft>=0){
?? ??? ??? ??? ?clearInterval(timer);//清空/暫停定時器
?? ??? ??? ?}else{
?? ??? ??? ??? ?oDiv.style.left=oDiv.offsetLeft+10+'px';
?? ??? ??? ?}
?? ??? ?},30)
?? ?}
?? ?
?? ?function startMove1(){
?? ??? ?clearInterval(timer);//防止每次鼠標經(jīng)過的時候都要出發(fā)定時器
?? ??? ?var oDiv=document.getElementById('div1');
?? ??? ?setInterval(function(){//定時器
?? ??? ??? ?if(oDiv.offsetLeft<=-200){
?? ??? ??? ??? ?clearInterval(timer);//清空/暫停定時器
?? ??? ??? ?}else{
?? ??? ??? ??? ?oDiv.style.left=oDiv.offsetLeft-10+'px';
?? ??? ??? ?}
?? ??? ?},30)
?? ?}
?? ?
</script>

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

y年華游你

2016-03-02

源自：JS動畫效果 2-1

關(guān)注問題我要回答

896

操作

收起

2 回答

奈奈我喜歡你呀回答被采納 +3 積分
2016-03-02

你的代碼應(yīng)該修改為

<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>速度動畫</title>
</head>
<style>

????body,div,span{
????????margin:0;
????????padding:0;
????}
????#div1{
????????width:200px;
????????height:200px;
????????background:red;
????????position:relative;
????????left:-200px;
????????top:0;
????}
????#share{
????????width:20px;
????????height:50px;
????????background:blue;
????????position:absolute;
????????left:200px;
????????top:75px;
????}
</style>

<script>
????window.onload=function(){
????????var?oDiv=document.getElementById('div1');
????????oDiv.onmouseover=function(){
????????????startMove();
????????}
????????oDiv.onmouseout=function(){
????????????startMove1();
????????}
????}
????var?timer=null;
????
????function?startMove(){
????????clearInterval(timer);//防止每次鼠標經(jīng)過的時候都要出發(fā)定時器
????????var?oDiv=document.getElementById('div1');
?????????timer=setInterval(function(){//定時器//開啟定時器
????????????if(oDiv.offsetLeft==0){
????????????????clearInterval(timer);//清空/暫停定時器
????????????}else{
????????????????oDiv.style.left=oDiv.offsetLeft+10+'px';
????????????}
????????},30)
????}
????
????function?startMove1(){
????????clearInterval(timer);//防止每次鼠標經(jīng)過的時候都要出發(fā)定時器
????????var?oDiv=document.getElementById('div1');
????????timer=setInterval(function(){//定時器
????????????if(oDiv.offsetLeft==-200){
????????????????clearInterval(timer);//清空/暫停定時器
????????????}else{
????????????????oDiv.style.left=oDiv.offsetLeft-10+'px';
????????????}
????????},30)
????}
????
</script>


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