原生js实现水平方向无缝滚动
更新时间：2017年01月10日 15:58:32 作者：想要全栈的chris
这篇文章主要为大家详细介绍了原生js实现水平方向无缝滚动的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
水平方向无缝滚动
滚动支持图片，文字
原理 ：一个大的盒子中放置两个盒子，通过设置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);
}
}
效果图：
效果就是一直滚动。
注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用ajax后台获取。
相关文章
通过BootStrap-select插件 js jQuery控制select属性变化
bootstrap-select我想大家都不陌生是一个前端下拉框的插件非常好用，在select的标签中设置属性可以做很多功能控制，下面通过本文给大家详细介绍下2017-01-01
本文给大家介绍了JavaScript中的逻辑或运算符||的用法,包括其基本概念、真值和假值、常见应用以及与其他逻辑运算符的对比,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要介绍了解决微信授权成功后点击按返回键出现空白页和报错的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了JavaScript实现文件下载并重命名代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
很多情况下，需要用到随机数，脚本之家特为大家整理了一些具体的使用与说明。2010-08-08
window.print可以打印网页，但有时候我们只希望打印特定控件或内容，怎么办呢，请看下面的例子2013-12-12
记得meta标签当中有一个refresh的功能吗？这是让浏览的页面刷新并可以转到相应的页面，如果刷新本页的话就会造成重复的刷新，现在我们就试试用脚本来实现只让页面刷新一次.2009-07-07
日期联动算是一个比较常见的功能了，随便度娘一下，你就能找到N多代码，今天给大家介绍的是个人比较常用，代码很简洁，高效，这里推挤给大家。2015-01-01
这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下2016-03-03
JS没有提供方便使用的Formatter函数，用字符拼接的方式看起来混乱难读，下面是JS简单实现版本(没有严格测试)2014-08-08
最新评论