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; //删除父定时器时，子的还在!!!!!!!!!!!!!!!!

}

程序终于正常运行了，做完不禁有点感叹，动手比较少，所以逻辑不够严谨，思路不够清晰。

巴特西

JS实现会动的小车

最新文章

热门文章