JS實現會動的小車

2015-06-05怎麼說呢，我想要實現的功能是很簡單的，可是過程當中，遇到很多問題。

      我要實現的功能是頁面右側有輛小車，鼠標滾動或者拉動滾動條，小車消失，在底部點擊「返還頂部」按鈕後，頁面緩慢向上滾動，同時小車出現，定位在屏幕底部不動，待頁面滾動到頂部時，小車緩慢向上滑動(一開始是讓小車勻速滑動的，後來加了個變速效果，讓小車移動得更好看)，製做一種動態效果。而且過程可重複進行。

     div結構以下：

<div id="myAll" style="top:220px;">
<div id="myCar"><img id="myPhoto" src="http://www1.pcauto.com.cn/test/pcauto131219/test/up.png" widht="40px" height="56px"></div>
<div id="myText">
<p class="myXian">|</p>
<div class="myOwn">寶馬92萬起價居家必備</div>
</div>
</div>

 

    其初始樣式以下：

#myCar{width:40px;height:56px;position:absolute;right:0px;display:block;}
#myAll{width:45px;height:286px;position:absolute;top:220px;right:50px;display:block;text-align:center}
#myText{width:20px;height:230px;position:absolute;top:52px;right:10px;display:block;}
.myXian{text-align:center;background-color:white;line-height:10px;background-color: transparent;}
.myOwn{text-align:center;border:2px solid;border-radius:15px;background-color:red;}

 

（1）頁面開始滾動，小車消失，很簡單，代碼以下：

window.onscroll=function(){
document.getElementById("myCar").style.position="fixed";
document.getElementById("myCar").style.display="none";
}

 （2）在頁面底部點擊「返回頂部」按鈕，頁面緩慢向上滾動。「緩慢」，要求的是改變滾動條的速度，懵懂的我百度了一會，終於有了眉目。在頁面滾動的同時，小車出現而後固定在頁面上不動。利用timer=setInterval("runToTop()",5)，讓滾動條每次上移10px的距離，來達到減速的效果。

function runToTop(){ 
currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
currentPosition-=10; 
if(currentPosition>0) 
{ 
window.scrollTo(0,currentPosition); //這裏的0表示橫座標，currentPosition表示豎座標
document.getElementById("myAll").style.top="500px"; 
document.getElementById("myAll").style.position="fixed"; 
document.getElementById("myAll").style.display="block";
 } 
}

（3）當滾動條到達最頂部的時候，小車要緩慢向上移動，建立動態的效果。

//代碼接上面的if
else 
{ 
  setInterval(function(){
      if(myTop>200){    //當小車從下往上移時與頂部的距離大於200時，小車持續上移

 document.getElementById("myAll").style.top=myTop+"px"; 
document.getElementById("myAll").style.position="absolute"; 
document.getElementById("myAll").style.display="block";
 myTop-=25; }} ,100);}
 window.scrollTo(0,0);   //currentPosition的值可能爲負數，這時須要把頁面滾到頂部

clearInterval(timer);  //清除掉定時器，不然再次拉動滾動條向下的時候會有矛盾
 }

 （4）若是你以爲到此完成了任務，你就錯了。執行程序以後，我發現其中存在衝突，在點擊「返回頂部」，執行runToTop()方法的同時，window.onscroll方法也一塊兒被執行了，這2個方法中小車的可見性（display屬性值）是不一樣的，貌似window.onscroll的優先級比較高，掩蓋掉了runTop（）方法，致使小車並無顯示在頁面上。後來，想到的解決方法是在window.onscroll方法中加入一個變量，適當改變它的值達到控制這個方法是否執行的目的。應用以下：

var isOk=true;   //初始值
window.onscroll=function(){
if(isOk==true)
{
document.getElementById("myAll").style.position="fixed";
document.getElementById("myAll").style.display="none";
}
}

（5）到此，貌似差很少能夠了，可是運行起來仍是發現了bug：小車雖第一次能夠正常滑動，可是第二次點擊「返回頂部」按鈕起，小車的狀況就和第一次不一樣了，大概知道是runToTop（）方法的邏輯有些問題。我調試程序發現，第二次以後，if(myTop>200){ }裏的代碼，始終沒有執行，原來小車通過第一次運動以後，全局變量myTop已經小於200了，須要對值進行一個從新賦值：

 myTop=500;//把mytop復原
 timer=setInterval("runToTop()",5); 

（6）最後仍是有問題，糾結了好久，終於找到了緣由，記得上面的代碼中，我清掉了定時器timer嗎（忘了煩請往回看看）？定時器timer中包含着一個讓小車緩慢移動的定時器，刪掉timer可是裏面的子定時器還存在，致使小車運動速度過快，壓根看不見了。解決方法，適時刪除子定時器。

function myClick()
{
   clearInterval(m); //此處須要清除上次所按「返回頂部」後設置的定時器
   changeLenght=0.2; 
   changeLenght1=0.2;   
   myTop=500;//把mytop復原
   timer=setInterval("runToTop()",5); 
}

（7）小車移動採用了先加速，後減速的運動方式，最終的代碼以下：

if(myTop>50)
  {
     m=setInterval(function(){
     
      if(myTop>250){    
      document.getElementById("myAll").style.top=myTop+"px";
      document.getElementById("myAll").style.position="absolute";
      document.getElementById("myAll").style.display="block";
      //不是勻速運動
      //myTop-=1;
      
      myTop-=changeLenght;
       //每次移動的距離增長0.02
      changeLenght+=0.02;
      }
      //當車子離頂部的距離大於250時作加速運動，小於250時作減速運動
      if(myTop<250&&myTop>50){    
      document.getElementById("myAll").style.top=myTop+"px";
      document.getElementById("myAll").style.position="absolute";
      document.getElementById("myAll").style.display="block";
    
      
      myTop-=changeLenght;
      //每次移動的距離減小0.02
      changeLenght-=0.02;
      }
      }      
  ,1);}   //把開始動的時間減少就不會閃了
window.scrollTo(0,0);
clearInterval(timer);
isOk=true; //刪除父定時器時，子的還在!!!!!!!!!!!!!!!! 
} 

 

        程序終於正常運行了，作完不由有點感嘆，動手比較少，因此邏輯不夠嚴謹，思路不夠清晰。