溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
水平方向無縫滾動
滾動支持圖片，文字
原理 ：一個大的盒子中放置兩個盒子，通過設置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后臺獲取。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
