星空网 > 软件开发 > Java

具有时间间隔的新闻上下滚动代码

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

 

<!DOCTYPE html><html><head><meta charset="utf-8"><title>具有时间间隔的新闻上下滚动代码</title><script type="text/javascript" src='/images/loading.gif' data-original="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/

 




原标题:具有时间间隔的新闻上下滚动代码

关键词:时间

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

焦点| 三大物流巨头,他们眼中的“双碳”生态账:https://www.goluckyvip.com/news/6581.html
跨境卖家怎样选择性价比高的海外仓?:https://www.goluckyvip.com/news/6582.html
4月1日起,Shopee上海仓暂停收货;越南有望成增长最快的:https://www.goluckyvip.com/news/6583.html
FBA改变运费计算规则!这类产品4月起成本飙升:https://www.goluckyvip.com/news/6584.html
注意!Shopee平台不活跃商品清理规则更新! :https://www.goluckyvip.com/news/6585.html
物流价格飙升,海外仓是破局方式?海外仓究竟适合哪些卖家?:https://www.goluckyvip.com/news/6586.html
深圳博物馆五一开放时间2024:https://www.vstour.cn/a/407239.html
青岛崂山北九水景区开放吗 青岛崂山北九水景区开放了吗:https://www.vstour.cn/a/407240.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流