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代码加载优化方法
Jan 30 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
JavaScript中的原型和继承详解(图文)
Jul 18 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
js实现全选和全不选
Jul 28 Javascript
CocosCreator入门教程之网络通信
Apr 16 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计数器的实现代码
2013/06/08 PHP
php给数组赋值的实例方法
2019/09/26 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript入门基础
2015/08/12 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
react PropTypes校验传递的值操作示例
2020/04/28 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python实现在线程里运行scrapy的方法
2015/04/07 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python绘制双柱形图代码实例
2017/12/14 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
django框架自定义用户表操作示例
2018/08/07 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
Python pip 常用命令汇总
2020/10/19 Python
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
面试后感谢信
2014/02/01 职场文书
职工运动会感言
2014/02/07 职场文书
董事长助理工作职责
2014/06/08 职场文书
初中班级口号
2014/06/09 职场文书
安全施工责任书
2014/08/25 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android