你的位置:首页 > Java教程

[Java教程]具有时间间隔的新闻上下滚动代码


具有时间间隔的新闻上下滚动代码:
滚动代码有多种多样,比如很像和纵向连续无缝滚动,但是总感觉无缝滚动对于新闻列表这样的有所欠缺,如果滚动的时候有一定的时间间隔的话就更为人性化了,下面就简单介绍一下如何实现此种效果。
代码如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><title>具有时间间隔的新闻上下滚动代码</title><script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript"> function AutoScroll(obj){  $(obj).find("ul:first").animate({   marginTop:"-25px"  },500,function(){   $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);  }); } $(document).ready(function(){  setInterval('AutoScroll("#scrollDiv_keleyi_com")',3000); }); </script><style type="text/css">.scrollDiv { height:25px;/* 必要元素 */ width:200px; line-height:25px; border:#ccc 1px solid; overflow:hidden;/* 必要元素 */ margin:0px auto;}.scrollDiv li { height:25px; padding-left:10px;}ul, li { list-style-type:none; margin:0px;}</style></head><body><div id="scrollDiv_keleyi_com" class="scrollDiv"><ul> <li><a href="#">蚂蚁部落欢迎您</a></li> <li><a href="#">只有奋斗才会有美好的明天</a></li> <li><a href="#">想要做的事情要马上着手</a></li> <li><a href="#">奋斗精神和互助胸怀能够成就一个人</a></li></ul></div></body></html>

 

以上代码实现了我们想要的结果,新闻标题可以不间断滚动,但是有一定的时间间隔,能够让浏览者有时间仔细浏览,更为人性化。

 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8039

更多内容可以参阅:http://www.softwhy.com/jquery/