码迷,mamicode.com
首页 > Web开发 > 详细

JS实现会动的小车

时间:2015-05-12 18:29:06      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:

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

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

     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";
}

 

JS实现会动的小车

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!