js不间断滚动的简单实现

CSS：

ul, li {
      margin: 0;
      padding: 0;
    } 

    #scrollDiv {
      width: 300px;
      height: 25px;
      line-height: 25px;
      border-bottom: #4c8cd1 1px solid;
      overflow: hidden;
    } 

      #scrollDiv li {
        height: 25px;
        padding-left: 10px;
      }

JS：

<script>
   function AutoScroll(obj) {
     $(obj).find("ul:first").animate({
       marginTop: "-25px"
     }, 800, function () {
       $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
     });
   } 

   $(document).ready(function () {
     setInterval('AutoScroll("#scrollDiv")', 3000)
     setInterval('AutoScroll("#scrollDiv")', 3000)
   });
 </script>

HTML：

<div id="scrollDiv">
        <ul>
          <li>这是公告标题的第一行</li>
          <li>这是公告标题的第二行</li>
          <li>这是公告标题的第三行</li>
          <li>这是公告标题的第四行</li>
          <li>这是公告标题的第五行</li>
          <li>这是公告标题的第六行</li>
          <li>这是公告标题的第七行</li>
          <li>这是公告标题的第八行</li>
        </ul> 

      </div>

以上这篇js不间断滚动的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 不间断循环滚动效果的实例代码(必看篇)

    蛮优秀的一段效果代码,可以上下左右滚动,收藏了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • 不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-01-31 (Ver 1.6)  更新说明: + 加入功能 * 修正.完善      1.6.070131          + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)          + 判断是否

  • JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. 先了解一下下面这几个属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容

  • 非常不错的不间断循环滚动类 兼容多浏览器

    调用的方法: 首先你得把脚本链接到你的页面,或者直接调用下面这个链接也行.当然,最好还是下载到你自己的机器上. 复制代码 代码如下: <script type="text/javascript" src="http://www.aeroom.org/include/scripts/scrollingAD.js"></script> 下面是第一种使用方法,看起来似乎比较麻烦一点,但是只需要两行代码: 复制代码 代码如下: var sampleD

  • JS不间断向上滚动效果代码

    复制代码 代码如下: <div id=demo style=overflow:hidden;height:139;width:232;background:#f4f4f4;color:#ffffff><div id=demo1><img src="http://www.lanrentuku.com/down/js/images/12460764740.jpg"><img src="http://www.lanrentuku.com/d

  • js不间断滚动的简单实现

    CSS: ul, li { margin: 0; padding: 0; } #scrollDiv { width: 300px; height: 25px; line-height: 25px; border-bottom: #4c8cd1 1px solid; overflow: hidden; } #scrollDiv li { height: 25px; padding-left: 10px; } JS: <script> function AutoScroll(obj) { $(ob

  • Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页

    制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-12-28 (Ver 1.65) 更新说明: + 加入功能 * 修正.完善     1.65.071228         * 横向.纵向滚动格式调整 (解决横向滚动换行的问题,无需特殊设置)         * 彻底解决由于IE问题导致上下滚动页面留白的问题 (本次更新主要解决此问题,感谢天上的书生参与测试)     1.6.070131         + 禁止鼠标控制

  • 再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6) /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5) 发布时间:2006-08-31 (Ver 0.8) 更新时间:2007-01-31 (Ver 1.6) 更新说明: + 加入功能 * 修正.完善        1.6.070131                +

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    JS实现的N多简单无缝滚动代码(包含图文效果)

    本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • js将滚动条滚动到指定位置的简单实现方法

    js将滚动条滚动到指定位置的简单实现方法 代码如下(主要是通过设置Location的hash属性): <!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"&

  • js 实用的无间断滚动图效果(良好兼容性)

    js 实用的无间断滚动图效果(良好兼容性)

    下面介绍一个方法:基本上实现结构跟行为相分离,两者的联系只需要一个 id就可以,使用起来很方便,而且同一个js代码可以实现在本页面多个滚动图效果,之间互不干扰, 1.xhtml 复制代码 代码如下: <div class="demo" id="demo1"> <table cellpadding="0" cellspacing="0"> <tr> <td><ul> &

  • JS实现title标题栏文字不间断滚动显示效果

    JS实现title标题栏文字不间断滚动显示效果

    本文实例讲述了JS实现title标题栏文字不间断滚动显示效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/19

随机推荐