原生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 相关文章推荐
JavaScript 获得选中文本内容的方法
Feb 15 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
js倒计时小程序
Nov 05 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
详解JavaScript ES6中的Generator
Jul 28 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 Javascript
原生JS生成指定位数的验证码
Oct 28 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
使用PHP模拟HTTP认证
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python生成密码库功能示例
2017/05/23 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
基于Python3.7.1无法导入Numpy的解决方式
2020/03/09 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
西班牙三叶草药房:Farmacias Trébol
2019/05/03 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
2014年党务公开实施方案
2014/02/27 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
2014年财务科工作总结
2014/11/11 职场文书
应急管理工作总结2015
2015/05/04 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
2022微信温控新功能上线
2022/05/09 数码科技
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python