首页 > 开发 > JS > 正文

js不间断滚动的简单实现

2024-05-06 16:31:24
字体:
来源:转载
供稿:网友
下面小编就为大家带来一篇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不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持VeVb武林网。



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表