效果图
scroll_table.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格滚动</title> <script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="scroll_table.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { function getData() { var html = ''; for (var i = 0; i < 100; i++) { var value = i + 1; html += '<tr>' + '<td>' + value + '</td>' + '<td>' + value + '</td>' + '<td>' + value + '</td>' + '<td>' + value + '</td>' + '</tr>'; } $('#tbList').html(html); } getData(); setTimeout(function() { $('.s_div').myScroll({ speed: 60, rowHeight: 40 }); }, 500); }); </script> <style type="text/css"> table{ width: 100%; } #tbList tr{ height: 40px; /*不给固定高度，会抽搐*/ } #tbList tr td{ text-align: center; } </style> </head> <body> <div class="main_table" style=" 600px; height: 400px; margin: 0 auto; border: 1px solid #eee;"> <table class="table-info-header"> <colgroup> <col width="25%" /> <col width="25%" /> <col width="25%" /> <col width="25%" /> </colgroup> <thead> <tr> <th> 1 </th> <th> 2 </th> <th> 3 </th> <th> 4 </th> </tr> </thead> </table> <div class="s_div" style="height:320px;overflow: hidden;"> <table class="table-info"> <colgroup> <col width="25%" /> <col width="25%" /> <col width="25%" /> <col width="25%" /> </colgroup> <tbody id="tbList"> </tbody> </table> </div> </div> </body> </html>
scroll_table.js
// JavaScript Document (function($) { $.fn.myScroll = function(options) { //默认配置 var defaults = { speed: 40, //滚动速度,值越大速度越慢 rowHeight: 24 //每行的高度 }; var opts = $.extend({}, defaults, options), intId = []; function marquee(obj, step) { obj.find("table").animate({ marginTop: '-=1' }, 0, function() { var s = Math.abs(parseInt($(this).css("margin-top"))); if (s >= step) { $(this).find("tr").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i) { var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this); intId[i] = setInterval(function() { if (_this.find("table").height() <= _this.height()) { clearInterval(intId[i]); } else { marquee(_this, sh); } }, speed); _this.hover(function() { clearInterval(intId[i]); }, function() { intId[i] = setInterval(function() { if (_this.find("table").height() <= _this.height()) { clearInterval(intId[i]); } else { marquee(_this, sh); } }, speed); }); }); } })(jQuery);
scroll_ul.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表滚动</title> <script src="jquery.min.1.8.3.js" type="text/javascript" charset="utf-8"></script> <script src="scroll_ul.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { function getData() { var html = ''; for (var i = 0; i < 100; i++) { var value = i + 1; html += '<li>' + value + '</li>'; } $('#tbList').html(html); } getData(); setTimeout(function() { $('.s_div').myScroll({ speed: 60, rowHeight: 40 }); }, 500); }); </script> <style type="text/css"> .list { width: 270px; border: 1px solid #eee; margin: 30px auto; } .s_div { height: 400px; overflow: hidden; } #tbList li{ height: 40px; /*不给固定高度，会抽搐*/ } </style> </head> <body> <div class="list"> <h2>列表滚动</h2> <div class="s_div"> <ul id="tbList"></ul> </div> </div> </body> </html>
scroll_ul.js
// JavaScript Document (function($) { $.fn.myScroll = function(options) { //默认配置 var defaults = { speed: 40, //滚动速度,值越大速度越慢 rowHeight: 24 //每行的高度 }; var opts = $.extend({}, defaults, options), intId = []; function marquee(obj, step) { obj.find("ul").animate({ marginTop: '-=1' }, 0, function() { var s = Math.abs(parseInt($(this).css("margin-top"))); if (s >= step) { $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i) { var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this); intId[i] = setInterval(function() { if (_this.find("ul").height() <= _this.height()) { clearInterval(intId[i]); } else { marquee(_this, sh); } }, speed); _this.hover(function() { clearInterval(intId[i]); }, function() { intId[i] = setInterval(function() { if (_this.find("ul").height() <= _this.height()) { clearInterval(intId[i]); } else { marquee(_this, sh); } }, speed); }); }); } })(jQuery);