table列表滚动

最新推荐文章于 2024-05-07 20:00:46 发布

原创最新推荐文章于 2024-05-07 20:00:46 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

这篇博客介绍了如何使用CSS来实现一个具有滚动功能的表格。内容包括如何设置HTML结构，特别是`<table>`元素，以及如何通过CSS样式控制thead和tbody部分，确保在滚动时表头固定不动。

css

<style>
* { margin: 0; padding: 0;}
.myscroll { width: 300px; height: 260px; margin: 0 auto; border: 1px solid #ccc; line-height: 26px; font-size: 12px; overflow: auto;}
table tr.even{
  background: yellow;
}
table{
    margin-top: -30px;
}
table tr{
   height: 30px;
}
::-webkit-scrollbar {
   display: none;
}
</style>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>简单的jQuery无缝向上滚动效果演示1_dowebok</title> 
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
$(function(){
   $('.myscroll').myScroll({
      speed: 40, //数值越大，速度越慢
      rowHeight: 30 //li的高度
   });
});
</script>


<tbody>
   <div class="myscroll">

</tbody>
</table>

   </div>
</tbody>
</html>

scroll.js

(function($){
    $.fn.myScroll = function(options){
        //默认配置
        var defaults = {
            speed:40,  //滚动速度,值越大速度越慢
            rowHeight:30 //每行的高度
        };

        var opts = $.extend({}, defaults, options),intId = [];

        function marquee(obj, step){

            obj.find("table").animate({
                marginTop: '-=1'
            },10,function(){
                var s = Math.abs(parseInt($(this).css("margin-top")));
                if((s-30) >= step){ //减去 table thead的高度
                    $(this).find("tbody tr").slice(0, 1).appendTo($(this));
                    $(this).css("margin-top", '-30px');
                }
            });
        }

        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);