介绍一个比较简单的多列文字上下循环翻动的公告代码

      在很多门户网站上,经常可以看到一种公告或广告文字,单行显示,内容则不断地上下翻动。鼠标放上去时,停止翻动,并显示提示文字。这种效果,一般是通过 CSS+JS并配合列表实现的。网上邻居在网上搜索了一下,整理出一种比较简单的代码,供感兴趣的朋友参考。

      它的效果如下:

CSS代码:

ul {padding: 0px; margin:0px;}
#announcement {width:100%;overflow: hidden;}
#announcement div {border: #ccc 1px solid;padding: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;white-space: nowrap}
#announcement a {text-decoration: none;}
#announcement a:hover {text-decoration:underline;}

HTML(页面)代码:

<div id="announcement" onmouseover="if(!anncount) {clearTimeout(annst);annst = 0}" onmouseout="if(!annst) annst = setTimeout('announcementScroll()', anndelay);">
    <div id="announcementbody">
        <ul>
            <li>
                <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
            <li>
               <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
            <li>
                <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
            <li>
              <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
            <li>
                <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
            <li>
               <a target="_blank" href="链接地址" title="提示文字">链接文字</a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
//<![CDATA[
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>

PS:

      本文保存后,发现了两个问题,一是标题栏打不开,无法修改;二是评论一直在打转,也打不开。看来这个JS代码和Jimdo博客有点冲突。经在别的页面上试验,完全正常,没有冲突。既然已发表了,就先放这儿吧...

Write a comment

Comments: 3
  • #1

    vsf (Friday, 03 January 2014 15:47)

    请教老师,本文介绍的上翻文字效果,用后面的“HTML(页面)代码”在jimdo上测试出错,现实的效果是顶行的重复文字?因为我的网站不是用的自定义模板,故只能用网页代码形式?请教老师该种出错的原因,我已经原原本本复制您的上翻文字效果部分的完整代码,但显示结果和上诉的一样哦!

  • #2

    网上邻居 (Sunday, 05 January 2014 12:26)

    vsf :
    这里的HTML(页面)代码是需要和CSS代码配套使用的,如果不加载CSS样式,肯定会出现问题。如果不是自定义模板,有两种添加CSS样式的方法,一是在“设置”里打开“编辑head部分”,将CSS代码添加进去;二是通过JS代码,将CSS添加进去,具体方法请见《介绍一个动态修改Jimdo网站模板CSS样式表的JS代码》,地址:http://jdm.jimdo.com/2013/02/03/js-css/,实际上本文所做的试验,正是采用了后一种方法。
    此外,PS中所说的两个问题,现在Jimdo升级后,已经不存在了。

  • #3

    wlp (Friday, 03 July 2015 12:29)

    http://www.burberry-outlet.jp.net/
    http://www.burberryoutlet.org.uk/
    http://www.burberryoutlet-online.co.com/
    http://www.burberryoutlet-online.in.net/
    http://www.calvinklein.co.com/
    http://www.celinebags.org/
    http://www.chanelhandbags.net.co/
    http://www.cheapbaseballbats.net/
    http://www.christianlouboutinshoes.ar.com/
    http://www.air-huarache.co.uk/
    http://www.airjordans.us/
    http://www.airjordanshoes2015.com/
    http://www.airmax-2015.org/
    http://www.airmax-90.org/
    http://www.babyliss-pro.net/
    http://www.basketballshoes.com.co/
    http://www.beatsbydrdre.co.com/
    http://www.beatsbydre.com.co/
    http://www.beats-by-dre.com.co/
    http://www.beatsheadphones.in.net/
    http://www.bottega.us/
    http://www.burberryhandbags.net.co/
    http://www.cheapjerseys.in.net/
    http://www.cheap-jordans.net/
    http://www.cheapmichaelkors.us.org/
    http://www.cheap-nikeshoes.com/
    http://www.cheapoakley.us.org/
    http://www.cheapoakleysunglasses.ar.com/
    http://www.cheap-oakleysunglasses.in.net/
    http://www.cheaprayban.com.co/
    http://www.cheapshoes.com.co/
    http://www.cheapuggboots.eu.com/
    http://www.chiflatiron.net.co/
    http://www.christian--louboutin.in.net/
    http://www.christianlouboutin.org.uk/
    http://www.christianlouboutinshoes.jp.net/
    http://burberry.outletnow.net/
    http://christian.louboutin-outlet.net/
    http://toryburch.salesandals.net/
    http://www.abercrombieand-fitch.com.co/
    http://www.abercrombiefitch.us.com/
    http://www.abercrombie-kids.us.com/
    http://www.coachfactory-outlet.co.com/
    http://www.coachfactoryoutletonline.co.com/
    http://www.coach-handbags.com.co/
    http://www.coachoutlet-online.com.co/
    http://www.coachoutletstore.net.co/
    http://www.coachoutletstore-online.com.co/
    http://www.coco-chanelbags.com.co/
    http://www.converse.net.co/
    http://www.designerhandbagsoutlet.com.co/
    http://www.eyeglassesonline.us.com/
    http://www.eyeglassframes.us.com/
    http://www.fashion-clothing.us.com/
    http://www.ferragamo.com.co/
    http://www.ferragamoshoes.net/
    http://www.ghdhairstraightener.com.co/
    http://www.jimmychoo.net.co/
    http://www.jordanretro.org/
    http://www.jordan-shoes.com.co/
    http://www.juicycouture.com.co/
    http://www.juicycoutureoutlet.net.co/
    http://www.louisvuitton-outlet.com.co/
    http://www.louisvuitton-outlets.us/
    http://www.marcjacobsonsale.com/
    http://www.mcm-bags.net/
    http://www.mcmhandbags.com.co/
    http://www.michaelkors.so/
    http://www.michael--kors.us.com/
    http://www.michaelkorsbags.us.org/
    http://www.michaelkorshandbags.org.uk/
    http://www.michael-kors-handbags.us.com/
    http://www.michaelkorsoutlet.ar.com/
    http://www.michael-kors-outlet.us.org/
    http://www.michaelkorsoutlet-online.ar.com/
    http://www.michael-kors-outlet-online.us.org/
    http://www.michaelkorsoutletonline-sale.us.com/
    http://www.michaelkors-uk.org.uk/
    http://www.montblanc--pens.net/
    http://www.newbalance-outlet.org/
    http://www.nike-air-max.us/
    http://www.nikefactory.org/
    http://www.nikefree5.net/
    http://www.nikefree-run.net/
    http://www.nikefree-run.org.uk/
    http://www.jordanrelease-dates.com/
    http://www.nikemercurial.net/
    http://www.nikerosherun.us/
    http://www.nikestore.us/
    http://www.northface.us.org/
    http://www.northfaceoutlet.com.co/
    http://www.oakleyoutlet.us.org/
    http://www.oakley-sunglasses.us.org/
    http://www.oakleysunglassescheap.in.net/
    http://www.oakleysunglassesoutlet.com.co/
    http://www.omegawatches.us.com/
    http://www.pandora-charms.org.uk/
    http://www.pandorajewelry.com.co/
    http://www.polo-outlets.com/
    http://www.pradahandbags.net.co/
    http://www.pradahandbags.com.co/
    http://www.pradashoes.com.co/
    http://www.ralph-lauren.org.uk/
    http://www.ralphlaurenoutlet.us.com/
    http://www.ralphlauren-outlet.org.uk/
    http://www.ralphlaurenoutletonline.com.co/
    http://www.ralphlaurenoutletonline.in.net/
    http://www.gucci.me.uk/