表格表頭不動,內容自動向上滾動


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>
2、設置class=' '
點擊查看代碼
<div class="scrollDiv">無縫滾動插件</div>
3、JavaScript
點擊查看代碼
$(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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM