随笔 - 89 文章 - 0 评论 - 2 阅读 - 11万

div 自动滚轮2

HTML:

<div class="cal_bottom"
                 style="height:78%;margin-top:2%;overflow:auto;"
                 id="gridtablejw">
                <ul id="zbry1"></ul>
                <ul id="zbry2"></ul>
            </div>

JS为div赋值：

policeData: function () {
           var data = [
               { "Img": "/Content/images/police/4.jpg", "code": "001", "CreateTime": "2022-10-19", "Status": "在岗" },
               { "Img": "/Content/images/police/3.jpg", "code": "002", "CreateTime": "2022-10-19", "Status": "出警" },
               { "Img": "/Content/images/police/djj.jpg", "code": "003", "CreateTime": "2022-10-19", "Status": "在岗" },
               { "Img": "/Content/images/police/sxm.png", "code": "004", "CreateTime": "2022-10-19", "Status": "出警" },
               { "Img": "/Content/images/police/lcm.png", "code": "005", "CreateTime": "2022-10-19", "Status": "在岗" },
               { "Img": "/Content/images/police/wzb.png", "code": "006", "CreateTime": "2022-10-19", "Status": "在岗" },
               { "Img": "/Content/images/police/hwb.png", "code": "007", "CreateTime": "2022-10-19", "Status": "在岗" },
               { "Img": "/Content/images/police/db.png", "code": "008", "CreateTime": "2022-10-19", "Status": "在岗" },
           ];
           var _html = "";
           //border - bottom: 1px solid #0c55af;
           for (var i = 0; i < data.length; i++) {
               _html += "<div class='lefttoday_p' style='cursor:pointer' data-id='" + data[i].id + "'>" +
                   "<div style='width:8%;float:left;left:1%;'>" +
                   "<img src='" + data[i].Img + "' style='width:100%;height:100%'/>" +
                   "</div>" +
                   "<div style='width:32%;padding-left:5%; float:left;font-size:13px;color:white'>" +
                      "<p style='padding-top:1%;padding-left:40%'>" + data[i].code + "</p>" +
                   "</div>" +
                   "<div style='width:30%; float:left;font-size:13px;color:white'>" +
                      "<p style='padding-left:48%'>" + data[i].CreateTime + "</p>" +
                   "</div>" +
                   "<div style='width:30%; float:left;font-size:13px;color:white'>" +
                      "<p style='padding-left:34%'>" + data[i].Status + "</p>" +
                   "</div>" +
                   "</div>"
           }
           $("#zbry1").html(_html);
           
       }

JS滚动效果:

//调用滚动效果<br>function rollzb(t) {
    var ul1 = document.getElementById("zbry1");
    var ul2 = document.getElementById("zbry2");
    var ulbox = document.getElementById("gridtablejw");
    ul2.innerHTML = ul1.innerHTML;
    ulbox.scrollTop = 0; // 开始无滚动时设为0
    var timer = setInterval(rollStartzb, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
    // 鼠标移入div时暂停滚动
    ulbox.onmouseover = function () {
        clearInterval(timer);
    }
    // 鼠标移出div后继续滚动
    ulbox.onmouseout = function () {
        timer = setInterval(rollStartzb, t);
    }
}
// 开始滚动函数
function rollStartzb() {
    // 上面声明的DOM对象为局部对象需要再次声明
    var ul1 = document.getElementById("zbry1");
    var ul2 = document.getElementById("zbry2");
    var ulbox = document.getElementById("gridtablejw");
    // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
    if (ulbox.scrollTop >= ul1.scrollHeight) {
        ulbox.scrollTop = 0;
    } else {
        ulbox.scrollTop++;
    }
}