当前位置: 代码迷 >> .NET相关 >> 具有时间间隔的快讯上下滚动代码
  详细解决方案

具有时间间隔的快讯上下滚动代码

热度:102   发布时间:2016-04-24 02:38:10.0
具有时间间隔的新闻上下滚动代码

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

 

<!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/

 

  相关解决方案