水平方向無(wú)縫滾動(dòng)
路橋網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、自適應(yīng)網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)建站成立與2013年到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。
滾動(dòng)支持圖片，文字
原理 ：一個(gè)大的盒子中放置兩個(gè)盒子，通過(guò)設(shè)置offsetWidth，scrollLeft的關(guān)系來(lái)實(shí)現(xiàn)，而且還用到定時(shí)器函數(shù)setInterval，當(dāng)手指移動(dòng)上去定義滾動(dòng)，離開繼續(xù)滾動(dòng)。兼容各大瀏覽器。
HTML代碼
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);
}
}
效果圖：
效果就是一直滾動(dòng)。
注意：內(nèi)容的寬度必須大于容器的寬度，否則無(wú)法滾動(dòng)，測(cè)試文字一般是使用ajax后臺(tái)獲取。
