表格表头不动,内容自动向上滚动


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