下面小编就为大家带来一篇 js 不间断滚动的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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 不间断滚动的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0227/265165.html