vue實現(xiàn)3D切換滾動效果
本文實例為大家分享了vue實現(xiàn)3D切換滾動效果的具體代碼,供大家參考,具體內(nèi)容如下
今天寫項目,遇到一個點擊切換的滾動需求,貼出來,做一個記錄
這個是最終的一個效果,點擊左右小箭頭,實現(xiàn)滾動效果,但是只是簡單滾動,沒有動畫之類的
實現(xiàn)思路:
css
中,正常寫一個div
用display:flex
來平鋪圖片- 然后中間位置定位一個框,框大小比外面的大,中間圖片隨意取列表中的一個就行
js
中,使用v-for
循環(huán)列表- 點擊右側(cè)時,將循環(huán)列表中的第一個圖片刪除,然后添加到列表最后一個,點擊左側(cè)時同理,這樣,就能簡單實現(xiàn)一個無縫循環(huán)的效果了
- 最重要的一點,因為中間時梯形,要么就是讓UI給一個框,前端設(shè)置超出隱藏屬性,達到梯形效果,要么就是自己用
polygon
這個css
屬性調(diào)出一個多邊形出來
貼一下代碼,看看
// html // <!-- 滾動 --> ? ? <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年職稱宣傳活動', ?? ? ? ? ? ?}, ?? ? ? ? ? ?{ ?? ? ? ? ? ? ?img: 'activity-02', ?? ? ? ? ? ? ?text: '2020年職稱宣傳活動1', ?? ? ? ? ? ?}, ?? ? ? ? ? ?{ ?? ? ? ? ? ? ?img: 'activity-03', ?? ? ? ? ? ? ?text: '2020年職稱宣傳活動2', ?? ? ? ? ? ?}, ?? ? ? ? ?], ?? ?} } methdos: { ?? ?// 點擊左側(cè) ?? ?previous() { ? ? ? const direction = 'left'; ? ? ? this.scrollImg(direction); ? ? }, ? ? // 點擊右側(cè) ? ? next() { ? ? ? const direction = 'right'; ? ? ? this.scrollImg(direction); ? ? }, ? ? // 處理滾動列表圖片 ? ? 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重點代碼 // 繪制多邊形 // 這幾個屬性為逆時針旋轉(zhuǎn) ?clip-path: polygon(4% 4%, 1% 90%, 95% 90%, 92% 4%);
具體就根據(jù)設(shè)計稿慢慢調(diào)整
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue 監(jiān)聽 Treeselect 選擇項的改變操作
這篇文章主要介紹了vue 監(jiān)聽 Treeselect 選擇項的改變操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08使用Vue指令實現(xiàn)Markdown渲染和代碼高亮
在前端開發(fā)中,我們經(jīng)常需要將Markdown格式的文本渲染成HTML并展示在頁面上,同時還希望能夠?qū)Υa塊進行高亮顯示,今天我將分享一段代碼,通過Vue指令實現(xiàn)了這個功能,需要的朋友可以參考下2023-09-09Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理
這篇文章主要為大家詳細介紹了Vue數(shù)據(jù)雙向綁定底層實現(xiàn)原理,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-11-11vue使用window.open()跳轉(zhuǎn)頁面的代碼案例
這篇文章主要介紹了vue中對window.openner的使用,vue使用window.open()跳轉(zhuǎn)頁面的代碼案例,本文通過實例代碼給大家詳細講解,需要的朋友可以參考下2022-11-11Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼
本篇文章主要介紹了Vuejs 組件——props數(shù)據(jù)傳遞的實例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03