Detailed explanation of examples of implementing marquee scrolling effect with JS

This article mainly introduces in detail the JS implementation of seamless loop marquee scrolling effect, which is compatible with IE, FireFox, and Chrome. It has certain reference value. Interested friends can refer to it.

None Seam loop marquee scrolling JS code implementation, compatible with IE, FireFox, Chrome, for your reference, the specific content is as follows

First, the CSS and HTML are as follows:

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

  }

  #marquee_zxd img {
    height: 100px;
  }

<!--　横向一定要是span -->
    <p id="marquee_zxd"><span>
      <!-- 内嵌一个p很重要，里面的元素必须是一个整体的移动。另外横移时，必须是行级元素只占自己的空间。 -->
      <p id="marquee_inner" style="position:relative; display: inline-block;">
      <img  src="/static/imghwm/default1.png"  data-src="img/duck.png"  class="lazy"  / alt="Detailed explanation of examples of implementing marquee scrolling effect with JS" >
      <img  src="/static/imghwm/default1.png"  data-src="img/donkey.png"  class="lazy"  / alt="Detailed explanation of examples of implementing marquee scrolling effect with JS" >
      <img  src="/static/imghwm/default1.png"  data-src="img/eggbird.png"  class="lazy"  / alt="Detailed explanation of examples of implementing marquee scrolling effect with JS" >
      <img  src="/static/imghwm/default1.png"  data-src="img/elephant.png"  class="lazy"  / alt="Detailed explanation of examples of implementing marquee scrolling effect with JS" >
      <img  src="/static/imghwm/default1.png"  data-src="img/butterfly.png"  class="lazy"  / alt="Detailed explanation of examples of implementing marquee scrolling effect with JS" >
    </p>
    </span></p>

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

The following is the JS implementation of 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 = $(&#39;#marquee_inner&#39;);
  //原内容大小
  var inner_width = $marquee_inner.css(&#39;width&#39;);
  //复制一份原内容
  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(&#39;marquee_zxd&#39;);
  //鼠标移上时清除定时器达到滚动停止的目的
  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");
  }
});

【Related Recommendations】

1. Javacript Free Video Tutorial

2. JS realizes uploading images and previewing them Detailed explanation of examples

3. Detailed explanation of the mobile finger zoom-in and zoom-out plug-in code

4. Detailed explanation of the bootstrap accordion folding tutorial

5. Detailed explanation of bootstrap modal box remote instance

The above is the detailed content of Detailed explanation of examples of implementing marquee scrolling effect with JS. For more information, please follow other related articles on the PHP Chinese website!