原生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 相关文章推荐
Dojo 学习要点
Sep 03 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
Jquery replace 字符替换实现代码
Dec 02 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
Javascript动画效果(1)
Oct 11 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 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 URL验证正则表达式
2011/07/19 PHP
PHP 文件系统详解
2012/09/13 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
深入理解PHP内核(一)
2015/11/10 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
常用简易JavaScript函数
2009/04/09 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
微信小程序实现多行文字滚动
2020/11/18 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
python实现FTP服务器服务的方法
2017/04/11 Python
用Eclipse写python程序
2018/02/10 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python文件操作方法详解
2020/02/09 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
公司拓展活动方案
2014/02/13 职场文书
小学教师师德承诺书
2014/05/23 职场文书
消防志愿者活动方案
2014/08/23 职场文书
校长个人总结
2015/03/03 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书