zoukankan      html  css  js  c++  java
  • 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='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++;
        }
      }
    }
  • 相关阅读:
    SQL行转列问题
    pgAdmin III 单表数据的导出导入
    window 服务的安装和卸载
    将Excel表格转成DataTable
    “Timeout 时间已到。在操作完成之前超时时间已过或服务器未响应”解决方法
    form-data提交
    由于本公司项目需要,现急需拥有微软MCSE证书的人才,一经录用,待遇从优!
    Head First设计模式悟道
    entityframwork
    .net 开源模板引擎jntemplate 教程:基础篇之在ASP.NET MVC中使用Jntemplate
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/11842011.html
Copyright © 2011-2022 走看看