189 8069 5689

JS如何实现无缝循环marquee滚动效果

这篇文章主要介绍JS如何实现无缝循环marquee滚动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

双鸭山网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联公司公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

无缝循环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;
  }


    
      
      
      
      
      
      
      
    
    

下面是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滚动效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


网站题目:JS如何实现无缝循环marquee滚动效果
浏览路径:http://cdxtjz.cn/article/jcspcp.html

其他资讯