資訊專欄INFORMATION COLUMN
列表自動滾動循環(huán)播放不要太爽，下面看看具體代碼：
1.實(shí)現(xiàn)效果圖
鼠標(biāo)移入，暫停滾動； 鼠標(biāo)移出，繼續(xù)滾動；
2.原理
第一：要實(shí)現(xiàn)無縫銜接，在原有ul后面還要有一個一樣內(nèi)容的ul；
第二：在最外層div為可視區(qū)域，設(shè)overflow：hidden；
第三：2個ul的高度 > 外層可視div高度，才能滾動；
3.實(shí)現(xiàn)代碼
html：
<!-- vue --> <div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)"> <ul id="comment1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul id="comment2"></ul> </div>
css:
div {
height: 100px; /* 必須 */
overflow: hidden;/* 必須 */
}js:
//vue data
data (){
return {
timer: null,
}
},
mounted() {
this.roll(60);
},
beforeDestroy() {
if (this.timer) clearInterval(this.timer);
},
//vue methods
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;
this.rollStart(t);
},
rollStart(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("review_box");
this.rollStop();
this.timer = setInterval(()=>{
// 當(dāng)滾動高度大于列表內(nèi)容高度時恢復(fù)為0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}, t);
},
rollStop(){
clearInterval(this.timer);
},文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/127671.html
摘要：基于等開發(fā)一款移動端音樂，界面參考了安卓版的網(wǎng)易云音樂布局適配常見移動端。圖標(biāo)使用阿里巴巴圖標(biāo)庫，中間的唱片旋轉(zhuǎn)動畫使用了實(shí)現(xiàn)。搜索功能實(shí)現(xiàn)功能搜索歌手歌單歌曲熱門搜索數(shù)據(jù)節(jié)流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發(fā)一款移動端音樂 WebApp，UI ...
摘要：后兩個屬性可選。屬性定義了項(xiàng)目的縮小比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。它的默認(rèn)值為，即項(xiàng)目的本來大小。結(jié)合的異步組件和的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。 項(xiàng)目總結(jié) 這是我第二個用 Vue 實(shí)現(xiàn)的項(xiàng)目，下面內(nèi)容包括了在實(shí)現(xiàn)過程中所記錄的知識點(diǎn)以及一些小技巧 項(xiàng)目演示地址：https://music-vue.n-y.io源...
摘要：前些天偷臺風(fēng)的閑暇時寫了一個移動端音樂播放器，作為練手項(xiàng)目。有的歌詞周杰倫算什么男人格式是時間點(diǎn)時間歌詞創(chuàng)建映射首先以將歌詞字符串分割成以時間點(diǎn)文字的數(shù)組，但由于這樣分割之后最后一個元素是空的，所以用刪除最后一個元素。 這段時間公司一直在做一個PC的教育類單頁應(yīng)用，龐大復(fù)雜，涉及非常多H5的知識，音頻就是其中的一部分。前些天偷臺風(fēng)的閑暇時寫了一個移動端音樂播放器，作為練手項(xiàng)目。 在線地...
閱讀 547·2023-03-27 18:33
閱讀 732·2023-03-26 17:27
閱讀 630·2023-03-26 17:14
閱讀 591·2023-03-17 21:13
閱讀 520·2023-03-17 08:28
閱讀 1801·2023-02-27 22:32
閱讀 1292·2023-02-27 22:27
閱讀 2177·2023-01-20 08:28
