原生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后台获取。

以上是 原生js实现水平方向无缝滚动 的全部内容, 来源链接: utcz.com/z/337218.html

回到顶部