亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS如何實現無縫循環marquee滾動效果

發布時間:2021-06-18 18:34:23 來源:億速云 閱讀:1233 作者:小新 欄目:web開發

這篇文章主要介紹JS如何實現無縫循環marquee滾動效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

無縫循環marquee滾動JS代碼實現,兼容IE, FireFox, Chrome,供大家參考,具體內容如下

首先是CSS和HTML如下:

  #marquee_zxd {
    border: 1px solid red;
    white-space: nowrap;
    overflow: hidden;
    width: 500px;
    padding-top: 5px;

  }

  #marquee_zxd img {
    height: 100px;
  }

<!-- 橫向一定要是span -->
    <div id="marquee_zxd"><span>
      <!-- 內嵌一個div很重要,里面的元素必須是一個整體的移動。另外橫移時,必須是行級元素只占自己的空間。 -->
      <div id="marquee_inner" >
      <img src="img/duck.png"/>
      <img src="img/donkey.png"/>
      <img src="img/eggbird.png"/>
      <img src="img/elephant.png"/>
      <img src="img/butterfly.png"/>
    </div>
    </span></div>

<script type="text/javascript" src="${cpath}/js/marquee_zxd.js"></script>

下面是JS實現marquee_zxd.js:

/**除了Chrome以外的瀏覽器可以通過scrollLeft屬性控制滾動*/
function scrolleft(obj){
  var $obj = $(obj); 
  //到右邊頂端后不會再變
  //var temp = obj.scrollLeft;
  //obj.scrollLeft++;
  var temp = $obj.scrollLeft();
  //console.log(temp);
  $obj.scrollLeft(temp+1);
  //當滾動條到達右邊頂端時;或本身長度不夠不好滾動(漫出才好滾)
  //if(obj.scrollLeft == temp){
  if($obj.scrollLeft() == temp){
    obj.innerHTML += obj.innerHTML;
    console.log('copy');
  }
  //當滾動條滾動了初始內容的寬度時,滾動條回到最左端,模擬循環
  //if (obj.scrollLeft >= obj.firstChild.offsetWidth)
  //  obj.scrollLeft = 0;
  if ($obj.scrollLeft() >= obj.firstChild.offsetWidth)
    $obj.scrollLeft(0);
}

/**除了Chrome以外的瀏覽器可以通過scrolleft()滾動*/
function initMarquee(){
  var aaa = document.getElementById('marquee_zxd');
  var MyMar = setInterval(function(){
    scrolleft(aaa);
  }, 20);

  //鼠標移上時清除定時器達到滾動停止的目的
  aaa.onmouseover=function() {clearInterval(MyMar);};
  //鼠標移開時重設定時器
  aaa.onmouseout=function() {MyMar = setInterval(function(){
    scrolleft(aaa);
  }, 20);};
}  


/**Chrome定時器循環函數,通過relative布局的left屬性控制滾動*/
function scrolleftChrome($marquee_inner, inner_width){
  var width = parseInt(inner_width);
  var leftPx = $marquee_inner.css("left");
  //兼容IE
  if(leftPx == 'auto')
    leftPx = 0;
  //位置左移
  var left = parseInt(leftPx);    
  left = left - 1;
  //到頂歸位
  if(left <= -width)
    left = 0;
  $marquee_inner.css("left", left);
  //console.log(width + ", " + left);
}

/**Chrome瀏覽器可以通過scrolleftChrome滾動*/
function initMarqueeChrome() {
  //局部變量不污染全局變量空間
  var $marquee_inner = $('#marquee_inner');
  //原內容大小
  var inner_width = $marquee_inner.css('width');
  //復制一份原內容
  var innerHtml = $marquee_inner.html();
  $marquee_inner.html(innerHtml + innerHtml);

  console.log(inner_width);
  //參數采用字符串形式的缺陷:參數不能被周期性改變,參數必須是全局變量
  //var MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 5000);
  var MyMar = setInterval(function(){
    //參數不污染全局變量空間
    scrolleftChrome($marquee_inner, inner_width);
  }, 50);

  var marquee_zxd = document.getElementById('marquee_zxd');
  //鼠標移上時清除定時器達到滾動停止的目的
  marquee_zxd.onmouseover=function() {clearInterval(MyMar);};
  //鼠標移開時重設定時器
  marquee_zxd.onmouseout=function() {
    //參數采用字符串形式的缺陷:參數不能被周期性改變,參數必須是全局變量
    //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50);
    MyMar = setInterval(function(){
      //參數不污染全局變量空間
      scrolleftChrome($marquee_inner, inner_width);
    }, 50);
  };
}

$(function(){
  var ua = window.navigator.userAgent; 
  var isIE = window.ActiveXObject != undefined && ua.indexOf("MSIE") != -1; 
  var isFirefox = ua.indexOf("Firefox") != -1; 
  var isChrome = ua.indexOf("Chrome") && window.chrome; 

  if(isChrome){
    initMarqueeChrome();
    console.log("isChrome: initMarqueeChrome");
  }else{
    initMarquee();
    console.log("isChrome: initMarquee");
  }
});

以上是“JS如何實現無縫循環marquee滾動效果”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

阿坝县| 东乡族自治县| 三明市| 灌阳县| 盐山县| 贵定县| 台南县| 遵义市| 绥滨县| 龙海市| 苍南县| 丰台区| 福贡县| 芜湖市| 永宁县| 博爱县| 长沙县| 治县。| 山阴县| 宣恩县| 潞西市| 赣榆县| 惠州市| 葫芦岛市| 阿坝县| 新平| 霞浦县| 武鸣县| 玉田县| 海门市| 阿拉善右旗| 古丈县| 凤山市| 广西| 鄂温| 巴林左旗| 五峰| 富源县| 伊川县| 绥中县| 辰溪县|