无缝滚动插件详解-优快云博客

一、js table 无缝滚动：点击打开链接

<script>
        //从下往上滚
        function scroll1(){
            var table = document.getElementById("table1").getElementsByTagName("tbody")[0];//$("#table1 > tbody").get(0)
            var row = table.firstChild;
            table.removeChild(row);   
            table.appendChild(row);    //可以通过ajax去取后面的数据
        }   
        //从上往下滚
        function scroll2(){
            var table = document.getElementById("table1").getElementsByTagName("tbody")[0];
            var row = table.lastChild;
            table.removeChild(row);   
            table.insertBefore(row,table.firstChild);
        }           
</script>
 
<table class="class1" id="table1" onmouseover="this.int=window.setInterval('scroll2()',1000)" onmouseout="window.clearInterval(this.int)">
  <tr><td>aaa</td><td>aaa</td></tr>
 <tr><td>bbb</td><td>bbb</td></tr>
 <tr><td>ccc</td><td>ccc</td></tr>
 <tr><td>xxx</td><td>xxx</td></tr>
 <tr><td>yyy</td><td>yyy</td></tr>
 <tr><td>zzz</td><td>zzz</td></tr>
</table>

二、liMarquee – jQuery无缝滚动插件：点击打开链接

liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 marquee 标签，但比 marquee 更强大。它可以应用于任何 Web 元素，包括文字、图像、表格、表单等元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等等。

使用方法

1、引入文件

<link rel="stylesheet" href="/css/liMarquee.css">
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.liMarquee.js"></script>

2、HTML

<div class="dowebok">jQuery无缝滚动插件liMarquee</div>

3、JavaScript

$(function(){
    $('.dowebok').liMarquee();
});

配置

名称	类型	默认值	说明
direction	字符串	left	滚动方向，可选 left / right / up / down
loop	整数	-1	循环次数，-1 为无限循环
scrolldelay	整数	0	每次重复之前的延迟
scrollamount	整数	50	滚动速度，越大越快
circular	布尔值	true	无缝滚动，如果为 false，则和 marquee 效果一样
drag	布尔值	true	鼠标可拖动
runshort	布尔值	true	内容不足是否滚动
hoverstop	布尔值	true	鼠标悬停暂停
xml	布尔值	false	加载 xml 文件
inverthover	布尔值	false	反向，即默认不滚动，鼠标悬停滚动