常见的网页滚动公告
我们在做网站或者系统的时候经常需要用到滚动公告功能。通常采用的是html的<marquee>标签。例如下面的代码
<marquee direction=”up” scrollamount=”1″ scrolldelay=”250″ onmouseover=”stop()” onmouseout=”start()”
style=”height:14px; width:280px;”>
<ul id=”notice_ul”>
<li><a href=”#”>1、今天下午两点半四楼会议室开会</a></li>
<li><a href=”#”>2、6月6号项目考试,请合理安排时间参加培训</a>!</li>
<li><a href=”#”>3、全国高考本次750万人参加,再添新高!你家有人参加了吗?</a></li>
</ul>
</marquee>
但是新的W3C标准已经不再提倡使用此标签,并且这种表情的滚动效果不能停顿显示,效果也不是很好。
于是另外一种逐条显示的公告就被普遍应用!今天给大家整理了一个如下,代码直接复制就可以引用噢!(默认显示第一条,过几秒钟,滚动显示第2,停顿几秒,再滚动显示下一条……然后一直这样循环显示。呵呵,这个效果是不是很常见呢!你掌握了吗?)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Discuz单行间歇滚动显示的公告效果丨芯晴网页特效丨CsrCode.Cn</title> <style type="text/css"> .cls_container { border:1px solid #ccc; width:680px; font-size:12px; height:24px; overflow:hidden; } .cls_container ul { list-style-type:none; margin:0; padding:0; margin-left:32px; } .cls_container ul li { height:24px; line-height:24px; width:320px; float:left; display:inline; } </style> </head> <body> <div id="myscroll" class="cls_container"> <ul> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1061.htm"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果,默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm"> Js实现的层展开、层折叠效果,默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm"> JavaScript未知高度元素的垂直居中的方法</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1056.htm"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1055.htm"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="http://www.csrcode.cn/html/txdm/qtdm/1054.htm"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1036.htm"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动(纵向、横向)" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1035.htm"> 图片的无缝滚动(纵向、横向)</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1034.htm"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1032.htm"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时,图片大小会相应变化" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1031.htm"> 鼠标接触或者离开图片时,图片大小会相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="http://www.csrcode.cn/html/txdm/sbtx/1028.htm"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1027.htm"> CSS Sprite制作的鼠标感应网站导航条</a></li> <li> <a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1025.htm"> 鼠标激活显示背景色的CSS特效代码</a></li> <li> <a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1023.htm"> [酷] 又一款FLASH图片切换效果代码</a></li> <li> <a title="精致的翻动图片新闻代码" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1022.htm"> 精致的翻动图片新闻代码</a></li> <li> <a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="http://www.csrcode.cn/html/txdm/sbtx/1021.htm"> 跟随鼠标顶部奇妙的海底生花</a></li> <li> <a title="强制点击广告代码的特效" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1020.htm"> 强制点击广告代码的特效</a></li> <li> <a title="鼠标经过列表显示小图的列表特效代码" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1019.htm"> 鼠标经过列表显示小图的列表特效代码</a></li> <li> <a title="不用圆角图片制作的圆角效果" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1018.htm"> 不用圆角图片制作的圆角效果</a></li> <li> <a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1061.htm"> 超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li> <li> <a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm"> CSS制作斜角上有背景图片的Div层</a></li> <li> <a title="Js实现的层展开、层折叠效果,默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm"> Js实现的层展开、层折叠效果,默认时候层是折叠的</a></li> <li> <a title="DIV始终固定在网页右下角位置的CSS实现方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1058.htm"> DIV始终固定在网页右下角位置的CSS实现方法</a></li> <li> <a title="JavaScript未知高度元素的垂直居中的方法" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1057.htm"> JavaScript未知高度元素的垂直居中的方法</a></li> <li> <a title="渐变彩色的文字" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1056.htm"> 渐变彩色的文字</a></li> <li> <a title="指定文字逐条显示" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1055.htm"> 指定文字逐条显示</a></li> <li> <a title="滚动的标题栏" target="_blank" href="http://www.csrcode.cn/html/txdm/qtdm/1054.htm"> 滚动的标题栏</a></li> <li> <a title="JS 4屏平滑滚动幻灯片特效" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1036.htm"> JS 4屏平滑滚动幻灯片特效</a></li> <li> <a title="图片的无缝滚动(纵向、横向)" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1035.htm"> 图片的无缝滚动(纵向、横向)</a></li> <li> <a title="鼠标触及带边框的菜单" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1034.htm"> 鼠标触及带边框的菜单</a></li> <li> <a title="比较实用的CSS控制链接颜色效果" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1032.htm"> 比较实用的CSS控制链接颜色效果</a></li> <li> <a title="鼠标接触或者离开图片时,图片大小会相应变化" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1031.htm"> 鼠标接触或者离开图片时,图片大小会相应变化</a></li> <li> <a title="特殊的鼠标悬停提示" target="_blank" href="http://www.csrcode.cn/html/txdm/sbtx/1028.htm"> 特殊的鼠标悬停提示</a></li> <li> <a title="CSS Sprite制作的鼠标感应网站导航条" target="_blank" href="http://www.csrcode.cn/html/txdm/cddh/1027.htm"> CSS Sprite制作的鼠标感应网站导航条</a></li> <li> <a title="鼠标激活显示背景色的CSS特效代码" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1025.htm"> 鼠标激活显示背景色的CSS特效代码</a></li> <li> <a title="[酷] 又一款FLASH图片切换效果代码" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1023.htm"> [酷] 又一款FLASH图片切换效果代码</a></li> <li> <a title="精致的翻动图片新闻代码" target="_blank" href="http://www.csrcode.cn/html/txdm/txtx/1022.htm"> 精致的翻动图片新闻代码</a></li> <li> <a title="跟随鼠标顶部奇妙的海底生花" target="_blank" href="http://www.csrcode.cn/html/txdm/sbtx/1021.htm"> 跟随鼠标顶部奇妙的海底生花</a></li> <li> <a title="强制点击广告代码的特效" target="_blank" href="http://www.csrcode.cn/html/txdm/ljwb/1020.htm"> 强制点击广告代码的特效</a></li> <li> <a title="鼠标经过列表显示小图的列表特效代码" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1019.htm"> 鼠标经过列表显示小图的列表特效代码</a></li> <li> </ul> </div> <div id="showhint"></div> <script type="text/javascript"> function $(element) { if(arguments.length > 1) { for(var i = 0, length = arguments.length, elements = []; i < length; i ++ ) { elements.push($(arguments[i])); } return elements; } if(typeof element == "string") { return document.getElementById(element); } else { return element; } } var Class = { create : function() { return function() { this.initialize.apply(this, arguments); } } } Function.prototype.bind = function(object) { var method = this; return function() { method.apply(object, arguments); } } var Scroll = Class.create(); Scroll.prototype = { initialize : function(element, height) { this.element = $(element); this.element.innerHTML += this.element.innerHTML; this.height = height; this.maxHeight = this.element.scrollHeight / 2; this.counter = 0; this.scroll(); this.timer = ""; this.element.onmouseover = this.stop.bind(this); this.element.onmouseout = function() { this.timer = setTimeout(this.scroll.bind(this), 1000); } .bind(this); } , scroll : function() { if(this.element.scrollTop < this.maxHeight) { this.element.scrollTop ++ ; this.counter ++ ; } else { this.element.scrollTop = 0; this.counter = 0; } if(this.counter < this.height) { this.timer = setTimeout(this.scroll.bind(this), 20); } else { this.counter = 0; this.timer = setTimeout(this.scroll.bind(this), 3000); } } , stop : function() { clearTimeout(this.timer); } } var myscroll = new Scroll("myscroll", 24); </script> </body> </html>
😳 这代码够长,看 着眼花。主题是威哥的改变的呀
2012-06-28 下午 4:15呵呵,其实用一个脚本打包就OK了。
2012-06-29 下午 1:27你的 博客各页面链接 需要优化,太长了
2012-06-14 上午 1:58