原生js實(shí)現(xiàn)水平方向無(wú)縫滾動(dòng)
更新時(shí)間：2017年01月10日 15:58:32 作者：想要全棧的chris
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)水平方向無(wú)縫滾動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
水平方向無(wú)縫滾動(dòng)
滾動(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代碼
<div id="demo">
<div id="demoin">
<div id="demo1">
<a href="">測(cè)試文字1</a>
<a href="">測(cè)試文字2</a>
<a href="">測(cè)試文字3</a>
<a href="">測(cè)試文字4</a>
<a href="">測(cè)試文字5</a>
<a href="">測(cè)試文字7</a>
<a href="">測(cè)試文字8</a>
<a href="">測(cè)試文字9</a>
<a href="">測(cè)試文字10</a>
<a href="">測(cè)試文字11</a>
<a href="">測(cè)試文字12</a>
<a href="">測(cè)試文字13</a>
<a href="">測(cè)試文字14</a>
<a href="">測(cè)試文字15</a>
<a href="">測(cè)試文字16</a>
<a href="">測(cè)試文字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);
}
}
效果圖：
效果就是一直滾動(dòng)。
注意：內(nèi)容的寬度必須大于容器的寬度，否則無(wú)法滾動(dòng)，測(cè)試文字一般是使用ajax后臺(tái)獲取。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
top.location.href 沒有權(quán)限 解決方法
以前好像沒有遇到這問(wèn)題，也可能是沒有在意吧，我的blog內(nèi)容頁(yè)都是有判斷的，規(guī)則是，如果top.location不是內(nèi)容頁(yè)的話就跳到內(nèi)容頁(yè)2008-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序畫布圓形進(jìn)度條顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript?雙位非運(yùn)算(~~?操作符)使用場(chǎng)景實(shí)例探索
本文為大家介紹JavaScript中雙位非運(yùn)算?~~，?~~?操作符是一個(gè)強(qiáng)大且經(jīng)常被忽視的特性，它提供了一種快速、簡(jiǎn)潔的方式來(lái)處理數(shù)字和執(zhí)行類型轉(zhuǎn)換，通常可以被用于數(shù)學(xué)計(jì)算和類型轉(zhuǎn)換，我們先了解一下?~~?的基本概念和它的一些應(yīng)用場(chǎng)景2024-01-01
IE11下使用canvas.toDataURL報(bào)SecurityError錯(cuò)誤的解決方法
這篇文章主要給大家介紹了關(guān)于在IE11下使用canvas.toDataURL報(bào)SecurityError錯(cuò)誤的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)同樣遇到這個(gè)問(wèn)題的朋友們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
微信小程序?qū)W習(xí)總結(jié)（五）常見問(wèn)題實(shí)例小結(jié)
這篇文章主要介紹了微信小程序常見問(wèn)題,結(jié)合實(shí)例形式總結(jié)分析了微信小程序常見錯(cuò)誤、數(shù)據(jù)緩存、界面交換等相關(guān)操作技巧,需要的朋友可以參考下2020-06-06
uniapp上傳圖片和上傳視頻的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于uniapp上傳圖片和上傳視頻的實(shí)現(xiàn)方法,文中還介紹了上傳文件的方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了微信小程序 二維碼生成工具 weapp-qrcode詳解,教大家如何在項(xiàng)目中引入weapp-qrcode.js文件，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JS工作中的小貼士之”閉包“與事件委托的”阻止冒泡“的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JavaScript console的使用方法實(shí)例分析
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實(shí)例形式分析了JavaScript console的使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04