vue實(shí)現(xiàn)3D切換滾動(dòng)效果
更新時(shí)間：2022年04月10日 15:08:05 作者：深圳最菜的前端
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)偽3D切換滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)3D切換滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下
今天寫項(xiàng)目，遇到一個(gè)點(diǎn)擊切換的滾動(dòng)需求，貼出來，做一個(gè)記錄
這個(gè)是最終的一個(gè)效果，點(diǎn)擊左右小箭頭，實(shí)現(xiàn)滾動(dòng)效果，但是只是簡(jiǎn)單滾動(dòng)，沒有動(dòng)畫之類的
實(shí)現(xiàn)思路：
css中，正常寫一個(gè)div用display:flex來平鋪圖片- 然后中間位置定位一個(gè)框，框大小比外面的大，中間圖片隨意取列表中的一個(gè)就行
js中，使用v-for循環(huán)列表- 點(diǎn)擊右側(cè)時(shí)，將循環(huán)列表中的第一個(gè)圖片刪除，然后添加到列表最后一個(gè)，點(diǎn)擊左側(cè)時(shí)同理，這樣，就能簡(jiǎn)單實(shí)現(xiàn)一個(gè)無縫循環(huán)的效果了
- 最重要的一點(diǎn)，因?yàn)橹虚g時(shí)梯形，要么就是讓UI給一個(gè)框，前端設(shè)置超出隱藏屬性，達(dá)到梯形效果，要么就是自己用
polygon這個(gè)css屬性調(diào)出一個(gè)多邊形出來
貼一下代碼，看看
// html
// <!-- 滾動(dòng) -->
? ? <div class="rolling">
? ? ? <div class="rolling-container">
? ? ? ? <div
? ? ? ? ? class="rolling-wraper"
? ? ? ? ? v-for="(v, i) in imgList"
? ? ? ? ? :key="i"
? ? ? ? ? @click="handleImg(v)"
? ? ? ? >
? ? ? ? ? <img
? ? ? ? ? ? :src="require(`@/assets/images/home/company/${v.img}.jpg`)"
? ? ? ? ? ? class="img"
? ? ? ? ? />
? ? ? ? </div>
? ? ? ? <!-- 左側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-left"></div>
? ? ? ? <div class="rolling-shadow"></div>
? ? ? ? <!-- 右側(cè)漸變陰影 -->
? ? ? ? <div class="gradient-right"></div>
? ? ? </div>
? ? ? <!-- 中間放大層 -->
? ? ? <div class="photo-bg"></div>
? ? ? <img
? ? ? ? :src="
? ? ? ? ? require(`@/assets/images/home/company/${this.imgList[1].img}.jpg`)
? ? ? ? "
? ? ? ? class="img-large"
? ? ? />
? ? ? <img
? ? ? ? :src="require(`@/assets/images/home/company/photo-bg.png`)"
? ? ? ? class="trapezoidal"
? ? ? />
? ? ? <!-- 底部切換 -->
? ? ? <div class="top-botton">
? ? ? ? <div class="btn-left" @click="previous"></div>
? ? ? ? <div class="center-text">{{ this.imgList[1].text }}</div>
? ? ? ? <div class="btn-right" @click="next"></div>
? ?</div>
</div>// js
data () {
?? ?return {
?? ??? ?imgList: [
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-01',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動(dòng)',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-02',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動(dòng)1',
?? ? ? ? ? ?},
?? ? ? ? ? ?{
?? ? ? ? ? ? ?img: 'activity-03',
?? ? ? ? ? ? ?text: '2020年職稱宣傳活動(dòng)2',
?? ? ? ? ? ?},
?? ? ? ? ?],
?? ?}
}
methdos: {
?? ?// 點(diǎn)擊左側(cè)
?? ?previous() {
? ? ? const direction = 'left';
? ? ? this.scrollImg(direction);
? ? },
? ? // 點(diǎn)擊右側(cè)
? ? next() {
? ? ? const direction = 'right';
? ? ? this.scrollImg(direction);
? ? },
? ? // 處理滾動(dòng)列表圖片
? ? scrollImg(direction) {
? ? ? if (direction === 'left') {
? ? ? ? const first = this.imgList.shift();
? ? ? ? this.imgList.push(first);
? ? ? } else {
? ? ? ? const last = this.imgList.pop();
? ? ? ? this.imgList.unshift(last);
? ? ? }
? ? ? console.log();
? ? },
}// css重點(diǎn)代碼 // 繪制多邊形 // 這幾個(gè)屬性為逆時(shí)針旋轉(zhuǎn) ?clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);
具體就根據(jù)設(shè)計(jì)稿慢慢調(diào)整
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue-cli3打包時(shí)圖片壓縮處理方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了vue如何禁止打開調(diào)試模式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁效果
這篇文章主要為大家詳細(xì)介紹了vue.js 2.0實(shí)現(xiàn)簡(jiǎn)單分頁效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了vant?toast?關(guān)閉棧溢出問題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了 Vue.js對(duì)象轉(zhuǎn)換的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問題詳解
這篇文章主要介紹了Vue結(jié)合后臺(tái)導(dǎo)入導(dǎo)出Excel問題詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
Vue實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)百分比進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)圓環(huán)百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue如何關(guān)閉prettier警告warn問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼
這篇文章主要介紹了VUE使用DXFParser組件解析dxf文件生成圖片的操作代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于VUE3函數(shù)的聲明和使用的相關(guān)資料, Vue3是一種流行的JavaScript框架,它允許開發(fā)人員構(gòu)建現(xiàn)代化的Web應(yīng)用程序,需要的朋友可以參考下2023-07-07