网页中简单的无缝滚动字幕效果 - 共享世纪

热门源码 | 热门软件 | 高级搜索 | 网站地图 | 文章·软件投稿

本站推荐：共享世纪推荐的2010·互联网建站品牌CMS

Windows/Linux高性能主机
2G 155元，3G 198元，5G 300元，欢迎联系本站站长选购！

网页中简单的无缝滚动字幕效果

脚本类别：文本操作　添加时间：2010-01-04　查看次数：　作者：oneboys

脚本代码

<style>
	*{padding:0;margin:0;font-size:12px;}
	#wrap{width:300px;background:#eee;}
	#wrap li{height:22px;line-height:22px;}
</style>
<div id="wrap" style="overflow:hidden;height:100px;">  
	<ul id="box1">
		<li>1 <a href="http://www.2ky.cn" title="信息公开工作">信息公开工作</a></li>
		<li>2 <a href="#" title="信息公开工作">国务院办公厅转发监察部等部门 </a></li>
		<li>3 <a href="#" title="信息公开工作">我市将严查损害发展环境问题</a></li>
		<li>4 <a href="#" title="办公时间调整通知">办公时间调整通知</a></li>
		<li>5 <a href="#" title="办公时间调整通知">办公时间调整通知d</a></li>
	</ul>
	<ul id="box2"></ul>
</div>

<div id="refer">
</div>
<script type="text/javascript">
		var speed=50;
		var $$=function(id){return document.getElementById(id);}
		$$('box2').innerHTML=box1.innerHTML;
		function roll(){
			if($$('box2').offsetTop-$$('wrap').scrollTop<=0)  {  //当滚动到第二部分的顶部位置时
				$$('wrap').scrollTop-=$$('box1').offsetHeight;	  //重置至第一部分顶部位置,相当于$$('box').scrollTop=0;
				}
			else{
				$$('wrap').scrollTop++ ;
				$$('refer').innerHTML=$$('box2').offsetTop+' '+$$('wrap').offsetHeight+' '+$$('wrap').scrollTop  //无他，参考值尔
			}
		}
		var start=setInterval(roll,speed);
		$$('wrap').onmouseover=function() {clearInterval(start)};
		$$('wrap').onmouseout=function() {start=setInterval(roll,speed)};
</script>

loading...

当前页面所处路径为共享世纪 / 脚本特效 / 文本操作 / ，本特效的Tag为：共享世纪

这就达到了无缝滚动的效果了，使用window的setInterval方法重复调用一个滚动函数。

Copyright·2006-2011 共享世纪 All Rights Reserved. Powered by lennyash，QQ联系站长
西公网监备:XA10870S - 陕ICP备08103724号 - （高级站长群:22181808，入门站长群:120111523）
共享世纪，已通过W3C组织XHTML/CSS 2.1! WEB标准校验！鸣谢：59互联带宽赞助 -