JS如何實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果

這篇文章主要介紹JS如何實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

雙鴨山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。

無縫循環(huán)marquee滾動(dòng)JS代碼實(shí)現(xiàn)，兼容IE, FireFox, Chrome，供大家參考，具體內(nèi)容如下

首先是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>
      <!-- 內(nèi)嵌一個(gè)div很重要，里面的元素必須是一個(gè)整體的移動(dòng)。另外橫移時(shí)，必須是行級(jí)元素只占自己的空間。 -->
      <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實(shí)現(xiàn)marquee_zxd.js：

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

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

  //鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
  aaa.onmouseover=function() {clearInterval(MyMar);};
  //鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
  aaa.onmouseout=function() {MyMar = setInterval(function(){
    scrolleft(aaa);
  }, 20);};
}  


/**Chrome定時(shí)器循環(huán)函數(shù)，通過relative布局的left屬性控制滾動(dòng)*/
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滾動(dòng)*/
function initMarqueeChrome() {
  //局部變量不污染全局變量空間
  var $marquee_inner = $('#marquee_inner');
  //原內(nèi)容大小
  var inner_width = $marquee_inner.css('width');
  //復(fù)制一份原內(nèi)容
  var innerHtml = $marquee_inner.html();
  $marquee_inner.html(innerHtml + innerHtml);

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

  var marquee_zxd = document.getElementById('marquee_zxd');
  //鼠標(biāo)移上時(shí)清除定時(shí)器達(dá)到滾動(dòng)停止的目的
  marquee_zxd.onmouseover=function() {clearInterval(MyMar);};
  //鼠標(biāo)移開時(shí)重設(shè)定時(shí)器
  marquee_zxd.onmouseout=function() {
    //參數(shù)采用字符串形式的缺陷：參數(shù)不能被周期性改變,參數(shù)必須是全局變量
    //MyMar = setInterval("scrolleftChrome($marquee_inner, inner_width)", 50);
    MyMar = setInterval(function(){
      //參數(shù)不污染全局變量空間
      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如何實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章題目：JS如何實(shí)現(xiàn)無縫循環(huán)marquee滾動(dòng)效果
URL分享：http://bm7419.com/article28/jcspcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、App開發(fā)、網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容