替换"marquee",实现无缝滚动

  js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就是left或者right,接下来是实现方法:实现li标签上下无缝滚动

  废话少说,粘贴代码,可以直接运行。

                    
<!DOCTYPE html>
<html>
  <head>
    <title>测试滚动</title>
    <!-- 引入在线Jquery -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </head>
  <style>
    #marquee li {
    height: 30px;
   }
  </style>

<body>
  <div style="height:180px;overflow:hidden;">
    <div id="marquee">
      <li>
        <span>1.水规院自动化码头设计关键技术研究工作交流会顺利召开</span>
      </li>
      <li>
        <span>2.巨型通航建筑物通航标准体系研究</span>
      </li>
      <li>
        <span>3.中交集团跃居世界500强第210位</span>
      </li>
      <li>
        <span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>
      </li>
      <li>
        <span>5.海南省与中交股份将全方位合作</span>
      </li>
      <li>
        <span>6.长江船舶设计院获中国标准创新贡献一等奖</span>
      </li>
    </div>
  </div>
</body>
<script>
  window.onload = function () {
    scrolldiv();
    // 鼠标停留,离开
    $("#marquee").mouseenter(function () {
      window.clearInterval(timename);
   });
    $("#marquee").mouseleave(function () {
      timename = setInterval("doScroll()", 50);
});
}
  var marquee = document.getElementById("marquee");
  var offset = 0;
  var scrollheight = marquee.offsetHeight;
  var length = marquee.children.length;
  function scrolldiv() {
    // 不可见处增加同等数量的li元素,模拟无缝连接(实际应该最上面li元素
    // 滚动到不可见之后,删除最上面li元素,再给div末尾添加删除的li元素)
    for (vari = 0; i < length - 1; i++) {
      var node = marquee.children[i].cloneNode(true);
      marquee.appendChild(node);
  }
    // 执行滚动,利用margin-top
    timename = setInterval("doScroll()", 50);
}
  function doScroll() {
    if (offset == scrollheight) {
      offset = 0;
}
    marquee.style.marginTop = "-" + offset + "px";
    offset += 1;
}
</script>
</html>

 核心思路:1.增加可见高度的元素(appendChild)。

        2.定时刷新margin-top使div上移模拟滚动。

 以上技术参考其他人,如有侵权,欢迎来电。

 

posted on 2018-03-08 09:41  碧落泉边  阅读(5351)  评论(0编辑  收藏  举报

导航