原生js實現(xiàn)水平方向無縫滾動
更新時間：2017年01月10日 15:58:32 作者：想要全棧的chris
這篇文章主要為大家詳細介紹了原生js實現(xiàn)水平方向無縫滾動的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
水平方向無縫滾動
滾動支持圖片，文字
原理 ：一個大的盒子中放置兩個盒子，通過設(shè)置offsetWidth，scrollLeft的關(guān)系來實現(xiàn)，而且還用到定時器函數(shù)setInterval，當手指移動上去定義滾動，離開繼續(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)文章
這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
top.location.href 沒有權(quán)限 解決方法
以前好像沒有遇到這問題，也可能是沒有在意吧，我的blog內(nèi)容頁都是有判斷的，規(guī)則是，如果top.location不是內(nèi)容頁的話就跳到內(nèi)容頁2008-08-08
這篇文章主要為大家詳細介紹了微信小程序畫布圓形進度條顯示效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
JavaScript?雙位非運算(~~?操作符)使用場景實例探索
本文為大家介紹JavaScript中雙位非運算?~~，?~~?操作符是一個強大且經(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錯誤的解決方法，文中通過示例代碼介紹的非常詳細，對同樣遇到這個問題的朋友們具有一定的參考學(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)方法,文中還介紹了上傳文件的方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了微信小程序 二維碼生成工具 weapp-qrcode詳解,教大家如何在項目中引入weapp-qrcode.js文件，通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JS工作中的小貼士之”閉包“與事件委托的”阻止冒泡“的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實例形式分析了JavaScript console的使用方法與操作注意事項,需要的朋友可以參考下2020-04-04