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 相关文章推荐
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
AngularJs 弹出模态框(model)
Apr 07 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
Vue 中可以定义组件模版的几种方式
Aug 06 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vue实现图片上传功能
May 28 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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用户指南-cookies部分
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
一步一步学习PHP(2)――PHP类型
2010/02/15 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python中的对数log函数表示及用法
2020/12/09 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
会计专业毕业生推荐信
2013/11/05 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
大学自我鉴定
2013/12/20 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
项目建议书
2015/02/04 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
部分武汉产收音机展览
2022/04/07 无线电