<HTML > <HEAD> <TITLE>css+js实现的Li列表单行多列无缝循环滚动效果</TITLE> <style type="text/css"> ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px } #announcement { width:100%; background:url() repeat; overflow: hidden; } #announcement div { border: #e6e6e6 1px solid; padding:0px 10px 0px 10px; overflow-y:hidden; line-height: 24px; height: 24px } #announcement li { font-size: 12px; float: left; list-style-type: none; margin-right: 20px; padding-left: 10px; background: url() no-repeat 0px 50%; white-space: nowrap } #announcement a { text-decoration: none; } #announcement a:hover { text-decoration:underline; } </style> </HEAD> <BODY> <DIV id=announcement onMouseOver="if(!anncount) {clearTimeout(annst);annst = 0}" onMouseOut="if(!annst) annst = setTimeout('announcementScroll()', anndelay);"> <DIV id=announcementbody> <UL> <li><a href="#nogo">CSS3图片手风琴效果</a></li> <li><a href="#nogo">国外的CSS3叠加效果</a></li> <li><a href="#nogo">dbexpress与元数据的Delphi结合实例</a></li> <li><a href="#nogo">使用Delphi开发高效的数据库应用系统(实例源码)</a></li> <li><a href="#nogo">CSS3网页平滑滚动过渡动画效果</a></li> <li><a href="#nogo">C#使用FileSystemWatcher组件监视系统日志文件是否被更改</a></li> <li><a href="#nogo">CSS3+jQuery完成3D缩略图悬浮提示效果</a></li> <li><a href="#nogo">jQuery与Js实现屏幕蒙层效果,Div层窗口</a></li> <li><a href="#nogo">Java 记事本源码+程序</a></li> <li><a href="#nogo">VC++视频目标检测演示框架【源代码】</a></li> </UL> </DIV> </DIV> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var anndelay = 3000; var anncount = 0; var annheight = 24; var annst = 0; function announcementScroll() { if( ! annst) { $('announcementbody').innerHTML += '<br style="clear: both" />' + $('announcementbody').innerHTML; $('announcementbody').scrollTop = 0; if($('announcementbody').scrollHeight > annheight * 3) { annst = setTimeout('announcementScroll()', anndelay); } else { $('announcement').onmouseover = $('announcement').onmouseout = null; } return; } if(anncount == annheight) { if($('announcementbody').scrollHeight - annheight <= $('announcementbody').scrollTop) { $('announcementbody').scrollTop = $('announcementbody').scrollHeight / 2 - annheight; } anncount = 0; annst = setTimeout('announcementScroll()', anndelay); } else { $('announcementbody').scrollTop ++ ; anncount ++ ; annst = setTimeout('announcementScroll()', 10); } } announcementScroll(); </script> </BODY> </HTML> <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.daimajiayuan.com">代码家园</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。</font></p> 运行代码 复制代码 另存代码 提示:可以先修改部分代码后再运行 转载请注明:代码家园 » css+js实现的Li列表单行多列无缝循环滚动效果 继续浏览有关 的文章 上一篇:CSS3文字3D立体效果 下一篇:兼容性很好的LI列表文字js无缝滚动效果 相关代码 另类的动画特效的文字链接鼠标悬停提示特效 JS实现很酷的水波文字特效 JS实现文字链接感应鼠标淡入淡出改变颜色 JS实现文字放大特效 + 纯CSS实现的文字倒影特效 + JS配合CSS实现的文字炫彩+阴影特效 + JS文字渐显溶解特效动态切换 + flash特效动态滚动渐变文字特效 + JS函数控制超链接必须先点击一款链接后才能点击 + CSS+JS模仿新浪微博大厅文字滚动特效 + jQuery版动画特效文字链接鼠标悬停提示 + JS+CSS代码简洁的无间断文字向上滚动切换特效 + JS实现的可爱跳动文字特效,代码有些复杂 + JavaScript实现的动态文字特效 + 像水波荡漾一样的文字 + 大小随机显示的动态文字