利用JS、CSS實(shí)現(xiàn)列表自動滑動滾動效果實(shí)例
零.業(yè)務(wù)需求
這幾天在做大屏項(xiàng)目，對于大屏有很多信息需要實(shí)時滾動，廢了點(diǎn)力氣學(xué)的明明白白的，特來記錄供大家學(xué)習(xí)。
0.1實(shí)現(xiàn)效果
一.邏輯分析
1.1滑動窗口和滾動條
當(dāng)我們使用<table>或者<ul>標(biāo)簽時，我們可以制作一個滾動條，通過滾動條來實(shí)現(xiàn)我們想要查看的內(nèi)容。
在滾動窗口內(nèi)，“已經(jīng)滾動過去”的區(qū)域我們稱為：“scrollHeight”，“還未滾動到”的 區(qū)域我們稱為：“scrollBottom”，“當(dāng)前顯示區(qū)域”稱為：“scrollNow”。
我們再用一張圖來描述一下，上面三個概念：
（可能有點(diǎn)丑...）
為方便，上面這一整個區(qū)域(scrollTop、scrollNow、scrollBottom)，我們統(tǒng)稱為：“滑動窗口”
1.2邏輯構(gòu)思
如果我們有：“兩份一模一樣的數(shù)據(jù)順序排列在一起形成一份數(shù)據(jù)”，再將這一份數(shù)據(jù)中的“元素”挨個展示在我們的“scrollNow”區(qū)域中，當(dāng)這份數(shù)據(jù)的最后一個“元素”被展示時，我們重新讓一整份數(shù)據(jù)從頭開始，這樣就在視覺上實(shí)現(xiàn)了滾動的效果。
在這里，有一個關(guān)鍵性的問題：“兩份數(shù)據(jù)的長度一定要大于顯示區(qū)域的長度，否則將無法實(shí)現(xiàn)滑動”
至于為什么，大家思考一下就行，當(dāng)我們的數(shù)據(jù)滑動時，滑動過去的數(shù)據(jù)被“隱藏”了，但并不是消失了！
如果我們的“可顯示區(qū)域”大于“數(shù)據(jù)”的長度，那么就會出現(xiàn)下面的情況：
當(dāng)顯示區(qū)域的長度足夠容納：“所有的數(shù)據(jù)”，此時還有“滑動”的必要嗎？？？
我們“滑動”的原因是因?yàn)椋?ldquo;數(shù)據(jù)量太大，展示區(qū)域有限，故讓它滑動方便查看”
1.3偽代碼實(shí)現(xiàn)
在js中，有幾個屬性：
“scrollTop”用來“設(shè)置或者獲取”元素的已滾動的上部“不可見區(qū)域”的高度，這個概念就是我們上述講的“scrollTop”(已經(jīng)滾動過的區(qū)域)
“scrollHeight”用來“返回”元素所有內(nèi)容的“總高度”(包括折疊不見的)，這個就是我們上述所說的(scrollTop+scrollNow+scrollBottom)
利用這幾個屬性，我們可以設(shè)定一個計(jì)時器用來計(jì)時，每次計(jì)時器加值時，scrollTop的值隨之加值(向上滾動)，從而實(shí)現(xiàn)了滾動。
二.代碼實(shí)現(xiàn)
2.1創(chuàng)建骨架
我們先創(chuàng)建一個div盒子，作為整個列表的骨架：
<div id="review_box">
<ul id="comment1">
<li>第一條</li>
<li>第二條</li>
<li>第三條</li>
<li>第四條</li>
<li>第五條</li>
<li>第六條</li>
</ul>
<ul id="comment2"></ul>
</div>其中“comment1”<ul>是原數(shù)據(jù)，“comment2”<ul>是原數(shù)據(jù)的副本，這兩部分?jǐn)?shù)據(jù)組合在一起形成我們的“一整個數(shù)據(jù)”
而<li>就是我們的“元素”，方便起見我這里內(nèi)置數(shù)據(jù)，后面根據(jù)需要可以自己再寫一個函數(shù)添加數(shù)據(jù)。
2.2創(chuàng)建樣式
只有骨架是不行的，沒有用到CSS美觀是很丑的，如果不使用CSS，那么就是下圖這個樣子：
為此我們使用如下代碼：
<style>
div {
width: 100px;
height: 100px; /*列表的長度*/
overflow: hidden;/* 必須 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}
ul {
margin: 0;
padding: 0; /*元素居中*/
list-style: none; /*去掉元素前面的標(biāo)簽*/
}
li{
height: 20px; /*元素高度,數(shù)據(jù)的高度等于元素個數(shù)乘元素高度*/
}
</style>2.3JS代碼
我們先創(chuàng)建一個“roll”滾動函數(shù)，用來實(shí)現(xiàn)控制“鼠標(biāo)懸停在列表上時暫停滾動”、“鼠標(biāo)離開列表時繼續(xù)滾動”
我們分別使用：“onmouseover”和“onmouseout”兩個事件來完成。
實(shí)現(xiàn)“向上滾動”和“向下滾動”在js中有些許不同，這里先以“向上滾動”為例
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 開始無滾動時設(shè)為0
var timer = setInterval(rollStart, t); // 設(shè)置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
// 鼠標(biāo)移入div時暫停滾動
ulbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠標(biāo)移出div后繼續(xù)滾動
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}我們再創(chuàng)建一個“rollStart”函數(shù)，用來啟動“自動滑動”
function rollStart() {
// 上面聲明的DOM對象為局部對象需要再次聲明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滾動不斷給scrollTop的值+1,當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop += 1;
}
}最后，在代碼的最前面加一句：
window.onload = roll(20);
用來代碼在頁面加載完畢時自動啟動，一切就完成啦?。?/p>
附：
如果想要列表向下滾動，我們只改動三處數(shù)值即可：
ulbox.scrollTop = ul1.scrollHeight; // 開始無滾動時設(shè)列表最長高度,用來表示到底了
上面將初始“scrollTop”置為最大值，表示此時數(shù)據(jù)底部到底了，即無法繼續(xù)向下滑動，只能向上滑動
// 正常滾動不斷給scrollTop的值減一,當(dāng)滾動高度小于等于0時，需要重新為最大高度
if (ulbox.scrollTop > 0) {
ulbox.scrollTop = ul1.scrollHeight;
}
else {
ulbox.scrollTop -= 1;
}上面控制“scrollTop”的值每次減一，如果小于等于0了，說明此時數(shù)據(jù)頂部到底了，即無法繼續(xù)向上滑動，只能向下滑動
值得注意：
若向下滑動，對應(yīng)的數(shù)據(jù)也應(yīng)是逆置的，否則將會出現(xiàn)部分?jǐn)?shù)據(jù)無法正?；瑒樱?/strong>
<div id="review_box">
<ul id="comment1">
<li>第六條</li>
<li>第五條</li>
<li>第四條</li>
<li>第三條</li>
<li>第二條</li>
<li>第一條</li>
</ul>
<ul id="comment2"></ul>
</div>不過若此時(列表長度等于原數(shù)據(jù)長度[不是整個數(shù)據(jù)]的高度,那么數(shù)據(jù)可以不用逆置)
三.全部代碼
下面代碼，復(fù)制粘貼即可使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px; /*列表的長度*/
overflow: hidden;/* 必須 */
margin: 50px auto;
border: 1px solid red;
text-align: center;
}
ul {
margin: 0;
padding: 0; /*元素居中*/
list-style: none; /*去掉元素前面的標(biāo)簽*/
}
li{
height: 30px; /*元素高度,數(shù)據(jù)的高度等于元素個數(shù)乘元素高度*/
}
</style>
</head>
<body>
<div id="review_box">
<ul id="comment1">
<li>第一條</li>
<li>第二條</li>
<li>第三條</li>
<li>第四條</li>
<li>第五條</li>
<li>第六條</li>
</ul>
<ul id="comment2"></ul>
</div>
<script>
window.onload = roll(20);
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 開始無滾動時設(shè)為0
var timer = setInterval(rollStart, t); // 設(shè)置定時器，參數(shù)t用在這為間隔時間（單位毫秒），參數(shù)t越小，滾動速度越快
// 鼠標(biāo)移入div時暫停滾動
ulbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠標(biāo)移出div后繼續(xù)滾動
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
// 開始滾動函數(shù)
function rollStart() {
// 上面聲明的DOM對象為局部對象需要再次聲明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
// 正常滾動不斷給scrollTop的值+1,當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop += 1;
}
}
</script>
</body>
</html>總結(jié)
到此這篇關(guān)于利用JS、CSS實(shí)現(xiàn)列表自動滑動滾動效果的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)列表自動滑動滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)滾輪控制圖片縮放效果的方法,涉及onmousewheel事件及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
全面解析Bootstrap中tooltip、popover的使用方法
這篇文章主要為大家詳細(xì)解析了Bootstrap中tooltip、popover的使用方法，了解提示框、彈出框的實(shí)現(xiàn)原理，感興趣的朋友可以參考一下2016-06-06
hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個樣式切換到另一個樣式，而且切換是會有過渡效果。但有時我們想要使用 js 來驅(qū)動過渡（即在代碼中觸發(fā)過渡）也是可以實(shí)現(xiàn)的，下面通過本文給大家介紹下2017-01-01
解決canvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題
下面小編就為大家?guī)硪黄鉀Qcanvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript的Date對象，和大家分享如何制作簡易鐘表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
這里是seajs loader的核心部分，有些IE兼容的部分還不是很明白，主要是理解各個模塊如何依賴有序加載，以及CMD規(guī)范2012-11-11
js監(jiān)聽輸入框值的即時變化onpropertychange、oninput
很多情況下我們都會即時監(jiān)聽輸入框值的變化，以便作出即時動作去引導(dǎo)瀏覽者增強(qiáng)網(wǎng)站的用戶體驗(yàn)感。2011-07-07
下面小編就為大家?guī)硪黄蛟焱ㄓ玫膭蛩龠\(yùn)動框架(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Map和WeakMap都是ES6中新增的數(shù)據(jù)結(jié)構(gòu),它們的主要區(qū)別在于鍵的作用域和鍵的類型,本文就通過代碼示例給大家詳細(xì)介紹了JavaScript鍵的作用域和類型,需要的朋友可以參考下2023-08-08
javascript特效實(shí)現(xiàn)——當(dāng)前時間和倒計(jì)時效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript特效實(shí)現(xiàn)——當(dāng)前時間和倒計(jì)時效果的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07