欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實現文字無縫滾動效果

 更新時間：2017年08月26日 08:52:31   投稿：lijiao  
這篇文章主要為大家詳細介紹了javascript實現文字無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了文字無縫滾動效果，供大家參考，具體內容如下

html

<dl id="marquee" class="marquee">
  <dt>
    <ul class="right-content">
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      <li>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="orderNum">BKCSHC161014002153</a> 
      </li>
      ...
    </ul>
  </dt>
  <dd></dd>
</dl>

js

<script>
    $(function(){
        Marquee("marquee");
    })

    //訂單滾動
    var Marquee = function(id){
      var container = document.getElementById(id), 
      original = container.getElementsByTagName("dt")[0], 
      clone = container.getElementsByTagName("dd")[0],
      liLength=original.getElementsByTagName("li").length,
      speed = 55;
      if(liLength<=8){
        return
      }
      clone.innerHTML = original.innerHTML;

      var rolling = function(){
        if (container.scrollTop === clone.offsetHeight) {
          container.scrollTop = 0;
        }
        else {
          container.scrollTop++;
        }
      }
      var timer = setInterval(rolling, speed)//設置定時器
      container.onmouseover = function(){
        clearInterval(timer)
      }//鼠標移到marquee上時，清除定時器，停止?jié)L動
      container.onmouseout = function(){
        timer = setInterval(rolling, speed)
      }//鼠標移開時重設定時器
    }    
 </script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

  • layui 對table中的數據進行轉義的實例

    layui 對table中的數據進行轉義的實例

    今天小編就為大家分享一篇layui 對table中的數據進行轉義的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 總結兩個Javascript的哈稀對象的一些編程技巧

    總結兩個Javascript的哈稀對象的一些編程技巧

    總結兩個Javascript的哈稀對象的一些編程技巧...
    2007-04-04
  • js實現文件上傳表單域美化特效

    js實現文件上傳表單域美化特效

    本文為大家分享的是一款效果非?？岬奈募蟼鞅韱斡蛎阑匦АＳ?種不同的美化文件上傳域的效果，很時尚，感興趣的小伙伴們可以參考一下
    2015-11-11
  • 淺談前端JS沙箱實現的幾種方式

    淺談前端JS沙箱實現的幾種方式

    在微前端領域當中，沙箱是很重要的一件事情。本文就淺談前端JS沙箱實現的幾種方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-07-07
  • JSONP解決同源策略限制引起跨域問題原理

    JSONP解決同源策略限制引起跨域問題原理

    這篇文章主要為大家介紹了JSONP解決同源策略限制引起跨域問題原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-08-08
  • 何時使用Map來代替普通的JS對象

    何時使用Map來代替普通的JS對象

    這篇文章主要介紹了何時使用Map來代替普通的JS對象，對Map感興趣的同學，可以參考下
    2021-04-04
  • 一文帶你了解JavaScript中偽數組的使用

    一文帶你了解JavaScript中偽數組的使用

    所謂偽數組,指的是具有類似數組結構的對象,但并非真正的數組,在本文中,我們將詳細介紹偽數組的特點和特征,并提供一些JavaScript代碼示例,感興趣的小伙伴快跟隨小編一起學習起來吧
    2023-11-11
  • JS首屏加載時間優(yōu)化的解決方法總結

    JS首屏加載時間優(yōu)化的解決方法總結

    首屏加載時間是一個衡量網頁性能和用戶體驗的關鍵指標,這個問題無論是在面試中還是在項目開發(fā)中都占有極其高的權重,本文為大家整理了幾種JS中優(yōu)化首屏加載時間的方法,希望對大家有所幫助
    2024-02-02
  • 簡單的js表格操作

    簡單的js表格操作

    這篇文章主要為大家詳細介紹了簡單的js表格操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-09-09
  • JS設計模式之惰性模式（二）

    JS設計模式之惰性模式（二）

    這篇文章主要為大家詳細介紹了JS設計模式之惰性模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-09-09

最新評論