Javascript实现无缝滚动的问题讨论

<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高度和的时候,滚动只会执行一次

 

转载于:https://www.cnblogs.com/heshan664754022/archive/2012/03/08/2384714.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值