vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)
更新時(shí)間：2022年04月11日 09:33:25 作者：禾小毅
這篇文章主要為大家詳細(xì)介紹了vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue或css動(dòng)畫實(shí)現(xiàn)列表向上無(wú)縫滾動(dòng)的具體代碼，供大家參考，具體內(nèi)容如下
方法一：vue的實(shí)現(xiàn)方法
<div id="publishMain" class="b_list"> ?<div id="publishMain1"> ? ?<div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex"> ? ? ?<!-- 循環(huán)的內(nèi)容 --> ? ?</div> ?</div> ?<div id="publishMain2"></div> </div>
js
<script>
export default {
? ? data(){
? ? ? ? return{
? ? ? ? ? ? timer: null,
? ? ? ? ? ? activityList:[]
? ? ? ? }
? ? },
? ? mounted() {
? ? ? ? this.$nextTick(() => {
? ? ? ? ? this.rollUp();
? ? ? ? });
? ? },
? ? beforeDestroy() {
? ? ? ? this.timer = null;
? ? ? ? clearInterval(this.timer);
? ? },
?
? ? methods: {
? ? ? ? /*向上輪播*/
? ? ? ? rollUp() {
? ? ? ? let ul1 = document.getElementById("publishMain1");
? ? ? ? let ul2 = document.getElementById("publishMain2");
? ? ? ? let box = document.getElementById("publishMain");
? ? ? ? ul2.innerHTML = ul1.innerHTML;
? ? ? ? box.scrollTop = 0;
? ? ? ? function rollStart() {
? ? ? ? ? ? if (box.scrollTop >= ul1.scrollHeight) {
? ? ? ? ? ? box.scrollTop = 0;
? ? ? ? ? ? } else {
? ? ? ? ? ? box.scrollTop++;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? this.timer = setInterval(rollStart, 50);
? ? }
? }
}
</script>css
.b_list{
? ?height: 19rem;
? ?overflow: hidden;
}方法二：純css動(dòng)畫
html
<div class="b_list"> ? <div class="b_scroll"> ? ? <div class="b_item" v-for="(ac,acindex) in activityList" :key="acindex"> ? ? ? <!-- 循環(huán)的內(nèi)容 --> ? ? </div> ? </div> </div>
css
@keyframes scrollTop {
? 0% {
? ? -webkit-transform: translate3d(0, 0, 0);
? ? transform: translate3d(0, 0, 0);
? }
? 100% {
? ? -webkit-transform: translate3d(0, -300px, 0);
? ? transform: translate3d(0, -300px, 0);
? }
}
.b_list{
? height: 19rem;
? overflow: hidden;
}
?
.b_scroll{
? ?-webkit-animation: 10s scrollTop linear infinite normal;
? ?animation: 10s scrollTop linear infinite normal;
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
使用Vite構(gòu)建Vue3項(xiàng)目的流程步驟
在現(xiàn)代前端開(kāi)發(fā)的世界中,Vue 3 已然成為了一個(gè)備受喜愛(ài)的框架,而 Vite 作為一個(gè)新興的構(gòu)建工具,以其極高的效率和簡(jiǎn)捷的配置方式席卷了開(kāi)發(fā)者圈,本文我們將一步一步展示如何使用 Vite 構(gòu)建一個(gè) Vue 3 項(xiàng)目,從創(chuàng)建項(xiàng)目到最后的構(gòu)建階段,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了vue.js模擬日歷插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
vue中img src 動(dòng)態(tài)加載本地json的圖片路徑寫法
這篇文章主要介紹了vue中的img src 動(dòng)態(tài)加載本地json的圖片路徑寫法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue3+el-table封裝示例詳解(編輯、刪除、查看詳情按鈕一起封裝)
在Vue3中,利用Element?Plus?UI庫(kù)封裝表格組件,實(shí)現(xiàn)編輯、刪除和查看詳情的功能,通過(guò)定義tableData和tableDataHeader來(lái)管理表格數(shù)據(jù)和表頭,其中tableData通常從后端獲取,而tableHeader可根據(jù)具體需求自定義,感興趣的朋友跟隨小編一起看看吧2024-09-09
KeepAlive 是 vue 中的內(nèi)置組件，當(dāng)多個(gè)組件動(dòng)態(tài)切換時(shí)可以對(duì)實(shí)例狀態(tài)進(jìn)行緩存，本文就來(lái)詳細(xì)的介紹一下Vue中KeepAlive內(nèi)置緩存使用，感興趣的可以了解一下2023-10-10
vue?elementui?大文件進(jìn)度條下載功能實(shí)現(xiàn)
本文介紹了如何使用下載進(jìn)度條來(lái)展示下載進(jìn)度的方法,并展示了相關(guān)的效果圖,結(jié)合實(shí)例代碼介紹了vue?elementui?大文件進(jìn)度條下載的方法,感興趣的朋友一起看看吧2025-01-01
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求中，并且不會(huì)重新加載頁(yè)面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合2022-09-09