Li列表单行多列无缝循环滚动
Li列表单行多列无缝循环滚动，我觉得这个挺实用的，如果不滚动的话，这个列表和普通的文章列表没什么区别，只是普通的Div+CSS结构布局，但是设定成一行多列的滚动后，JavaScript代码自动根据行宽去控制LI的多少，比如行宽很窄的情况下，可能只是一行两列的形式滚动，较宽的时候，则就更多的Li了，这个也可根据您的需要设置调整啦。
当前位置：编程学习 > JS >>
答案：<HTML >
<HEAD>
<TITLE>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="/soft/18571.shtml" target="_blank">CSS3图片手风琴效果</a></li><li><a href="/soft/18572.shtml" target="_blank">国外的CSS3叠加效果</a></li><li><a href="/soft/18546.shtml" target="_blank">dbexpress与元数据的Delphi结合实例</a></li><li><a href="/soft/18547.shtml" target="_blank">使用Delphi开发高效的数据库应用系统（实例源码）</a></li><li><a href="/soft/18570.shtml" target="_blank">CSS3网页平滑滚动过渡动画效果</a></li><li><a href="/soft/18627.shtml" target="_blank">C#使用FileSystemWatcher组件监视系统日志文件是否被更改</a></li><li><a href="/soft/18569.shtml" target="_blank">CSS3+jQuery完成3D缩略图悬浮提示效果</a></li><li><a href="/soft/18568.shtml" target="_blank">jQuery与Js实现屏幕蒙层效果，Div层窗口</a></li><li><a href="/soft/18661.shtml" target="_blank">Java 记事本源码+程序</a></li><li><a href="/soft/18563.shtml" target="_blank">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>
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思