原生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 相关文章推荐
js获取客户端外网ip的简单实例
Nov 21 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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 阴历-农历-转换类代码
2012/01/16 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
初学Python函数的笔记整理
2015/04/07 Python
详解Python中的四种队列
2018/05/21 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python plt可视化——打印特殊符号和制作图例代码
2020/04/17 Python
Python matplotlib可视化实例解析
2020/06/01 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
求职自荐书范文
2013/12/04 职场文书
演讲稿格式范文
2014/05/19 职场文书
销售人才自我评价范文
2014/09/27 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
中学教代会开幕词
2016/03/04 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
利用js实现简单开关灯代码
2021/11/23 Javascript