Discuz 公告效果（自动换行，无间隙滚动）

更新时间：2009年03月26日 01:38:55 作者：

Discuz 公告效果效果代码，可以自动换行和无间隙滚动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE></TITLE> <META http-equiv=Content-Type content="text/html; charset=gbk"> <style type="text/css"> ul {     padding-right: 0px;     padding-left: 0px;     padding-bottom: 0px;     margin: 0px;     padding-top: 0px } #announcement {     width:100%;     background:url(img/menu_bg.gif) 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(img/arrow_right.gif) 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="http://hi.baidu.com/mimimo/blog/item/0f4ab6defbf1b65fccbf1ada.html" target="_blank">分享个表单验证函数</A>（2008-12-16 05:30 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/d6b9543ddf2739e93d6d9798.html" target="_blank">块级元素和级联元素的含义</A>（2008-12-13 03:39 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/5cc8a31ed1749d1841341796.html" target="_blank">如何设置&lt;span&gt;的width属性且不换行？？</A>（2008-12-13 03:23 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/11bf1b174322d9064a90a788.html" target="_blank">执行javascript后，gif动画就静止了？？</A>（2008-12-13 03:12 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/67424f901f46308aa977a4f5.html" target="_blank">基于栅格地图的查询系统（切片缓存技术）</A>（2008-11-29 07:38 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/b5230933b495d5ff1b4cff78.html" target="_blank">【转】flash和javascript之间的通讯（javascript调用flash中的函数）</A>（2008-11-27 07:45 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/07bad22a214e132ad42af106.html" target="_blank">不使用循环和回调函数输出字符1~100</A>（2008-11-23 03:00 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/acc8421005e1fbfbc2ce795a.html" target="_blank">简洁的js图片等比缩放</A>（2008-11-22 04:54 P.M.）</LI> <LI><A href="http://hi.baidu.com/mimimo/blog/item/2940948f875a27fd503d9265.html" target="_blank">分贝网音乐地址获取器</A>（2008-11-20 05:19 P.M.）</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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js关于精确计算和数值格式化以及直接引js文件
本文为大家介绍下关于精确计算和数值格式化以及直接引js文件，大家可以学习下
2014-01-01
Bootstrap表单组件教程详解
表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程，感兴趣的朋友一起学习吧
2016-04-04
js实现弹窗暗层效果
本文主要分享了js实现弹窗暗层效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript 设计模式富有表现力的Javascript（一）
javascript设计模式是图灵出版，学习中力求每个章节都细看。
2010-05-05
javascript 对象与 prototype 原型用法实例分析
这篇文章主要介绍了javascript 对象与 prototype 原型用法,结合实例形式分析了javascript 对象与 prototype 原型实现对象创建、继承、拷贝等相关操作技巧,需要的朋友可以参考下
2019-11-11
JavaScript NaN和Infinity特殊值 [译]
本文要讲的是两个特殊值,NaN和Infinity,返回这两个值的操作通常都应该返回正常的数字
2012-09-09
javascript实现动态改变层大小的方法
这篇文章主要介绍了javascript实现动态改变层大小的方法,涉及javascript操作页面属性的相关技巧,需要的朋友可以参考下
2015-05-05
微信小程序时间轴实现方法示例
这篇文章主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关操作技巧,需要的朋友可以参考下
2019-01-01
JavaScript获取客户端计算机硬件及系统等信息的方法
本文为大家详细介绍下如何使用JavaScript获取客户端计算机硬件及系统等信息，下面有个不错的示例，感兴趣的朋友可以参考下
2014-01-01
谈谈JavaScript异步函数发展历程
对大部分JavaScript开发者而言，async函数仍是新鲜事物，其发展经历了漫长的旅程。本文将梳理总结JavaScript异步函数的发展历程，并表示未来async函数将成为实现异步的主要方式。
2015-09-09

Discuz 公告效果（自动换行，无间隙滚动）

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具