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


Posted in Javascript onMay 22, 2017

无缝循环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" style="position:relative; display: inline-block;">
      <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");
  }
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
微信小程序支付前端源码
Aug 29 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
小程序实现锚点滑动效果
Sep 23 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
jQuery表单验证之密码确认
May 22 #jQuery
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 #Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 #Javascript
JavaScript表单验证实现代码
May 22 #Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 #jQuery
原生JS实现N级菜单的代码
May 21 #Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 #Javascript
You might like
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php多任务程序实例解析
2014/07/19 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
2014/08/18 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
微信小程序实现无限滚动列表
2020/05/29 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
Python实现多并发访问网站功能示例
2017/06/19 Python
python连接数据库的方法
2017/10/19 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python pyheatmap包绘制热力图
2018/11/09 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python实例化对象的具体方法
2020/06/17 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
大学生毕业自我鉴定范文
2013/09/19 职场文书
运动会广播稿60字
2014/01/15 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
项目负责人岗位职责
2015/02/15 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
法律服务所工作总结
2015/08/10 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
golang 实现Location跳转方式
2021/05/02 Golang
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS