JS实现会动的小车

时间：2015-05-12 18:25:52 收藏：0 阅读：218

怎么说的，我写的代码是很简单的，但是过程中，遇到不少问题。

我要实现的功能是页面右侧有辆小车，鼠标滚动或者拉动滚动条，小车消失，在底部点击“返还顶部”按钮后，页面缓慢向上滚动，同时小车出现，定位在屏幕底部不动，待页面滚动到顶部时，小车缓慢向上滑动，制作一种动态效果。并且过程可重复进行。

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>
<p>宝马92万起价居家必备</P>
</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;background-color:red;}
.myXian{text-align:center;background-color:white;}

（1）页面开始滚动，小车消失，很简单，代码如下：

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

原文：http://www.cnblogs.com/lulu-beibei/p/4498029.html