liMarquee 是一款基于 jQuery 的无缝滚动插件,可以应用于任何 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>
点击查看代码
<div class="scrollDiv">无缝滚动插件</div>
点击查看代码
$(function(){
$('.scrollDiv').liMarquee();
});
下面使用liMarquee插件,使表格表头不动,内容自动向上滚动。
画两个表格,一个只显示表头,一个不显示表头,将第二个表格使用liMarquee插件,使内容滚动起来
主要代码如下:
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/liMarquee.css">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
table,table tr th, table tr td {
border:2px solid #3486da;
}
table{
border-collapse: collapse;
}
.a1{
height:38px;
width:100px;
text-align:center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class='a1'>1</th>
<th class='a1'>2</th>
<th class='a1'>3</th>
<th class='a1'>4</th>
<th class='a1'>5</th>
</tr>
</thead>
</table>
<div class="scrollDiv" style="height:200px;">
<table>
<thead>
<tr style="display:none"> <!--不显示表头-->
<th class='a1'>1</th>
<th class='a1'>2</th>
<th class='a1'>3</th>
<th class='a1'>4</th>
<th class='a1'>5</th>
</tr>
</thead>
<tbody>
<tr>
<td class='a1'>1</td>
<td class='a1'>1</td>
<td class='a1'>1</td>
<td class='a1'>1</td>
<td class='a1'>1</td>
</tr>
<tr>
<td class='a1'>2</td>
<td class='a1'>2</td>
<td class='a1'>2</td>
<td class='a1'>2</td>
<td class='a1'>2</td>
</tr>
<tr>
<td class='a1'>3</td>
<td class='a1'>3</td>
<td class='a1'>3</td>
<td class='a1'>3</td>
<td class='a1'>3</td>
</tr>
<tr>
<td class='a1'>4</td>
<td class='a1'>4</td>
<td class='a1'>4</td>
<td class='a1'>4</td>
<td class='a1'>4</td>
</tr>
<tr>
<td class='a1'>5</td>
<td class='a1'>5</td>
<td class='a1'>5</td>
<td class='a1'>5</td>
<td class='a1'>5</td>
</tr>
<tr>
<td class='a1'>6</td>
<td class='a1'>6</td>
<td class='a1'>6</td>
<td class='a1'>6</td>
<td class='a1'>6</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js" ></script>
<script src="js/jquery.liMarquee.js"></script>
<script type="text/javascript">
$(function(){
$('.scrollDiv').liMarquee({
direction: 'up',//向上滚动
runshort: false,//内容不足时不滚动
scrollamount: 20,//速度
});
});
</script>
</body>
</html>