原生js实现水平方向无缝滚动


Posted in Javascript onJanuary 10, 2017

水平方向无缝滚动

滚动支持图片,文字
原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动。兼容各大浏览器。
HTML代码

<div id="demo">
    <div id="demoin">
      <div id="demo1">
        <a href="">测试文字1</a>
        <a href="">测试文字2</a>
        <a href="">测试文字3</a>
        <a href="">测试文字4</a>
        <a href="">测试文字5</a>
        <a href="">测试文字7</a>
        <a href="">测试文字8</a>
        <a href="">测试文字9</a>
        <a href="">测试文字10</a>
        <a href="">测试文字11</a>
        <a href="">测试文字12</a>
        <a href="">测试文字13</a>
        <a href="">测试文字14</a>
        <a href="">测试文字15</a>
        <a href="">测试文字16</a>
        <a href="">测试文字17</a>
      </div>
      <div id="demo2"></div>
    </div>
  </div>

CSS代码

#demo{
      width:1000px;
      height:30px;
      overflow:hidden;
      line-height:30px;
      font-size:13px;
      font-family:'宋体';
      background:#ddd url(images/notice.png) no-repeat 25px center;
      color:#0C77CF;
      font-weight:bold;
      margin: 0 auto;
    }
    #demoin {
      width: 900px;
      height: 30px;
      margin: 0 auto;
      white-space: nowrap;
      overflow: hidden;
    }
    #demo #demo1, #demo #demo2{display:inline}

Javascript代码

window.onload = function(){
    scrollLeft();
  };
  function scrollLeft(){
    var speed = 20;
    var tab = document.getElementById('demoin');
    var tab1 = document.getElementById('demo1');
    var tab2 = document.getElementById('demo2');
    tab2.innerHTML = tab1.innerHTML;
    function Marquee(){
      if(tab2.offsetWidth - tab.scrollLeft <=0) {    
        tab.scrollLeft = 0;
      }else{
        tab.scrollLeft ++;
      }

    }
    var timer = setInterval(Marquee,speed);
    tab.onmouseover = function(){
      clearInterval(timer);
    };
    tab.onmouseout = function(){
      timer = setInterval(Marquee,speed);
    }
  }

效果图:

原生js实现水平方向无缝滚动

效果就是一直滚动。

注意:内容的宽度必须大于容器的宽度,否则无法滚动,测试文字一般是使用ajax后台获取。

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
vue组件实例解析
Jan 10 #Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 #Javascript
React实现点击删除列表中对应项
Jan 10 #Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 #Javascript
微信小程序 slider 详解及实例代码
Jan 10 #Javascript
微信小程序 switch组件详解及简单实例
Jan 10 #Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 #Javascript
You might like
杏林同学录(九)
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
python网络编程实例简析
2014/09/26 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
使用Python生成随机密码的示例分享
2016/02/18 Python
python 获取网页编码方式实现代码
2017/03/11 Python
微信跳一跳python代码实现
2018/01/05 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
8段用于数据清洗Python代码(小结)
2019/10/31 Python
使用Python pip怎么升级pip
2020/08/11 Python
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
国际贸易专业求职信
2014/06/04 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
文化大革命观后感
2015/06/17 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
Flask response响应的具体使用
2021/07/15 Python