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