替換"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上移模擬滾動。

 以上技術參考其他人,如有侵權,歡迎來電。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM