1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
======JS=======<br>$(function (){       let text = $("#fTbody:first");
            let clear; //定义需要清除动画的部分
            $("#fTbody>tr:odd").addClass("odd");
            //添加鼠标悬停事件
            text.hover(function () {
                clearInterval(clear);
            }, function () {
                clear = setInterval(function () {
                    let findText = text.find("tr:first");
                    let textHeight = findText.height();
                    text.animate({
                        easing: 'linear',
                        iterations: 'Infinity',
                        marginTop: -textHeight + "px"
                    }, 1000, function () {
                        //清除margin值
                        findText.css("marginTop", 0).appendTo(text);
                        text.css("marginTop", 0);
                    })
                }, 1000) //滚动间隔时间
            }).trigger("mouseleave");<br>})<br>

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//通过JS将数据赋值
var data = [
        { "Img": "img/police/nan.jpg", "code": "赵鹏", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "王晴", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "李立", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "夏雨", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "柳树", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "赵砚", "CreateTime": "" },
        { "Img": "img/police/nan.jpg", "code": "王三小", "CreateTime": "" },
        { "Img": "img/police/nv.jpg", "code": "王三一", "CreateTime": "" }
    ];
var _html = "<table style='font-size: 14px;width:100%;margin-top:1%'>" +
        "<tbody id='fTbody'>"; +
        "<tr class='Freezing_tdd'><th style='width:30%'>警员照片</th>" +
        "<th style='width:30%'>警员姓名</th>" +
        "<th style='width:30%'>警员职务</th>" +
        "</tr>";
    for (var i = 0; i < data.length; i++) {
        _html += "<tr>" +
            "<td style='text-align:center;width:30%;'>"
            + "<img style='width:20%;height:6%;' src='" + data[i].Img + "'></td>"
            + "<td style='text-align:center;width:30%'>" + data[i].code + "</td>"
            + "<td style='text-align:center;width:30%'>" + data[i].CreateTime + "</td>"
            + "</tr>";
    }
    _html += "</tbody></table>";
 
    $("#gridtablejw").html(_html);

  html

1
2
<div class="cal_bottom" style="height:89%;overflow:hidden;margin-top:2%" id="gridtablejw">
            </div>

  CSS

滚动条样式,将滚动条隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.cal_bottom::-webkit-scrollbar {/*滚动条整体样式*/
    width:0.5px;/*高宽分别对应横竖滚动条的尺寸*/
    height:4px;
    }
     
    .cal_bottom::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 
    border-radius:5px;
    -webkit-box-shadow: inset005pxrgba(0,0,0,0.2); 
    /* background:rgba(0,0,0,0.2);  */
    background: #051655;
    }
     
    .cal_bottom::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset005pxrgba(0,0,0,0.2);
    border-radius:0;
    /* background:rgba(0,0,0,0.1); */
    background:#051655;
    }

  

posted on   我的梦想是开个小店  阅读(1328)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示