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>
