常见的网页滚动公告

作者：ckily 发布：2012-05-25 15:18 分类：网站建设阅读：8,213 次 3条评论

我们在做网站或者系统的时候经常需要用到滚动公告功能。通常采用的是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>

本文固定链接: http://20tc.com/%e5%b8%b8%e8%a7%81%e7%9a%84%e7%bd%91%e9%a1%b5%e6%bb%9a%e5%8a%a8%e5%85%ac%e5%91%8a.html | TC的博客

该日志由 ckily 于2012年05月25日发表在网站建设分类下，你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 常见的网页滚动公告 | TC的博客

【上一篇】成长虽可贵健康价更高
【下一篇】怎么在wordpress添加页面模板

常见的网页滚动公告：目前有3 条留言

板凳
xilouqingzhu :

😳 这代码够长，看着眼花。主题是威哥的改变的呀

2012-06-28 下午 4:15 [回复]
- TC :
  
  呵呵，其实用一个脚本打包就OK了。
  
  2012-06-29 下午 1:27 [回复]
沙发
我们爱小众 :

你的博客各页面链接需要优化，太长了

2012-06-14 上午 1:58 [回复]

常见的网页滚动公告

常见的网页滚动公告：目前有3 条留言

发表评论

热门文章

最新文章

文章归档

分类目录

最新评论

标签云集

博客赞助