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 01 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
Aug 21 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
vue设置动态请求地址的例子
Nov 01 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
javascript中layim之查找好友查找群组
Feb 06 Javascript
NestJs使用Mongoose对MongoDB操作的方法
Feb 22 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 session 检测和注销
2009/03/16 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
学习jQuey中的return false
2015/12/18 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JS组件Bootstrap Table布局详解
2016/05/27 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
python将字符串转换成数组的方法
2015/04/29 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
利用python开发app实战的方法
2019/07/09 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
预备党员思想汇报范文
2013/12/29 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
党员转正意见怎么写
2015/06/03 职场文书