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; //删除父定时器时，子的还在!!!!!!!!!!!!!!!! }
程序终于正常运行了，做完不禁有点感叹，动手比较少，所以逻辑不够严谨，思路不够清晰。
