js无缝滚动

页面主要代码如下:

<div id="scrollarea" class="scrollarea" style="height:100%;overflow: hidden">
  <div id="clonepart" style="margin-top:0">
   </div>
   <div id="clonepartHide">
   </div>
</div>

数据调用方法代码如下:

复制代码
$.ajax({
  url: "${ctx}/pwlp/decision/environmentSubject/getlawItem.ht",
  type: 'POST', //GET
  async: true,    //或false,是否异步
  data:{year:year,districtCode:districtCode,monthVal:monthVal,domain:"sthjhzybh"},
  dataType: 'json',    //返回的数据格式:json/xml/html/script/jsonp/text
  success: function (data) {
    $("#clonepart").empty();
    var str = "";
    var classArr = new Array("juxh-one","juxh-two","juxh-three","juxh-four","juxh-five","juxh-six","juxh-seven");
    for(var i = 0; i < data.thematicAnalysisList.length; i++){
      if(i < 7){
        str += "<div class='judgeRule-list districtRankDiv-list'>"+
              "<div class='judgeRule-list-left fl'>"+
                "<span class='judgeRule-list-xh "+classArr[i]+"'>"+(i+1)+"</span>"+
                "<span>"+data.thematicAnalysisList[i].lawItem+"</span>"+
              "</div>"+
            "</div>"
      }
    }
    if(str == ""){
      $("#clonepart").append("<div style='width:100%; text-align:center'>暂无数据</div>");
    }else{
      $("#clonepart").append(str);
    }
    var flag = false;
    if(data.thematicAnalysisList.length > 6){
      flag = true;
    }
    roll('clonepart','clonepartHide','scrollarea',flag);
  }
})
复制代码

无缝滚动代码如下:

复制代码
//轮播滚动
function roll(newDataUl,hideNewDataUl,newDataDiv,flag) {
  var ul1 = document.getElementById(newDataUl);
  var ul2 = document.getElementById(hideNewDataUl);
  var box = document.getElementById(newDataDiv);
  if(flag){
    ul2.innerHTML = ul1.innerHTML;
  }
  box.scrollTop = 0;
  var timer = setInterval(rollStart, 30);
  box.onmouseover = function () {
    clearInterval(timer);
  }
  box.onmouseout = function () {
    timer = setInterval(rollStart, 30);
  }
  function rollStart() {
    var ul1 = document.getElementById(newDataUl);
    var box = document.getElementById(newDataDiv);
    if (box.scrollTop >= ul1.scrollHeight) {
      box.scrollTop = 0;
    } else {
      box.scrollTop++;
    }
  }
}
复制代码
posted @   岁月淡忘了谁  阅读(593)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示