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; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步