Javascript实现无缝滚动的问题讨论
2012-03-08 09:37
363 查看
<div id="demo" style="overflow: hidden; height: 80px; width: 180px;"> <div id="demo1" class="demo1"> <ul> <li><img src="list.gif" /> <a title=".net开发工程师" href="#">.net开发工程师</a></li> <li><img src="list.gif" /> <a title="项目经理" href="#">项目经理 </a></li> <li><img src="list.gif" /> <a title="虚拟化测试工程师" href="#">虚拟化测试工程师</a></li> <li><img src="list.gif" /> <a title="销售经理" href="#">销售经理 </a></li> <li><img src="list.gif" /> <a title="协议测试工程师" href="#">协议测试工程师</a></li> <li><img src="list.gif" /> <a title="协议开发工程师" href="#">协议开发工程师</a></li> <li><img src="list.gif" /> <a title="驱动工程师" href="#">驱动工程师 </a></li> <li><img src="list.gif" /> <a title="J2ee软件开发工程师" href="#">J2ee软件开发工程师</a></li> <li><img src="list.gif" /> <a title="赴IBM 大机技术支持工程师" href="#">赴IBM大机技术支持工程师</a></li> <li><img src="list.gif" /> <a title="赴IBM Websphere portal server实施工程师" href="#">赴IBMWebsphere portal server实施工程师 </a></li> <li><img src="list.gif" /> <a title="赴IBM AIX系统管理员" href="#">赴IBMAIX系统管理员 </a></li> </ul> </div> <div id="demo2" class="demo2"></div> </div>
//方法1 function Marquee1(){ if(2*demo1.offsetHeight-demo.scrollTop<=80) { demo.scrollTop-=demo1.offsetHeight; } else{ demo.scrollTop++ ; } } //方法2 function Marquee21(){ if(demo2.offsetTop-demo.scrollTop<=0) { demo.scrollTop-=demo1.offsetHeight; } else{ demo.scrollTop++ ; } }
注:offsetTop指的是demo2对应的div到当前对象到其上级层顶部的距离,如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象),直到body或一个table上级层(Table时则不会有问题,不会跳过的)。
scrollTop:对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.即是在出现了纵向滚动条的情况下,因滚动条拉动而隐藏的距离.
offsetHeight:当前对象的高度。
当使用第一个方法的时候请注意一个问题,就是当demo2.offsetTop地距离大于demo1和demo2高度和的时候,滚动只会执行一次
相关文章推荐
- 纯javascript实现四方向文本无缝滚动效果
- JavaScript实现走马灯效果[无缝连接、循环滚动]
- div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox
- javascript实现左右控制无缝滚动
- javascript实现平滑无缝滚动
- 原生javascript实现图片无缝滚动效果
- javascript实现图片无缝滚动(scrollLeft的使用方法介绍)
- javascript实现图片无缝滚动-------Day 27
- 基于javascript实现文字无缝滚动效果
- JavaScript实现简单精致的图片左右无缝滚动效果
- JavaScript 中滚动的无缝滚动和间歇无缝滚动实现
- JavaScript实现垂直向上无缝滚动特效代码
- javascript实现无缝上下滚动
- javascript实现多张图片左右无缝滚动效果
- 陈华:jquery不转原生javascript实现热点无缝滚动效果代码复用
- javascript实现的上下无缝滚动效果
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
- JavaScript实现走马灯效果[无缝连接、循环滚动] 向左
- javascript实现的可改变滚动方向的无缝滚动