您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用Vue實(shí)現(xiàn)類(lèi)似Spring官網(wǎng)圖片滑動(dòng)效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
可以看到, 隨著鼠標(biāo)的滑動(dòng),綠色圖片和灰色圖片可以無(wú)縫的在鼠標(biāo)倆兩邊切換顯示。
顯示這樣的效果其實(shí)很簡(jiǎn)單,利用固定定位保證兩張圖片在同一位置下, 我們可以將灰色圖片當(dāng)做背景層圖片,然后根據(jù)獲取到的實(shí)時(shí)X軸坐標(biāo), 動(dòng)態(tài)改變綠色圖片的寬度, 隱藏超出X軸坐標(biāo)的部分, 就可以達(dá)到這樣的效果, 簡(jiǎn)單來(lái)說(shuō), 這效果就是動(dòng)態(tài)改變上層圖片的寬度。
實(shí)現(xiàn)效果:
我這邊選擇了兩張同樣大小的KDA卡莎的圖片, 將金色圖作為背景圖,暗黑圖作為左側(cè)圖, 用了Vue的mousemove來(lái)獲取X軸坐標(biāo)值, 并通過(guò)監(jiān)聽(tīng)坐標(biāo)軸變化來(lái)實(shí)時(shí)改變左側(cè)圖片的寬度。
鼠標(biāo)部分, 簡(jiǎn)化了Spring官網(wǎng)上鼠標(biāo)位置出軸承的顯示, 采用了cursor: ew-resize樣式, 使得鼠標(biāo)看起來(lái)可以左右滑動(dòng)。
代碼粘貼
<template> <div class="scroll"> <div class="container" @mousemove="mousemove"> <div class="base"></div> <div class="left" ref="left"> <img src="../../static/image/kda-karsa.jpg" alt=""> </div> </div> </div> </template> <script> export default { data() { return { posX: 0 } }, methods: { mousemove(e) { // 獲取x 坐標(biāo) this.posX = e.offsetX } }, watch: { posX(curX) { this.$refs.left.style.width = `${curX}px` } } } </script> <style lang="scss" scoped> .scroll{ .container{ width: 960px; height: 540px; background-color: #cccccc; position: relative; cursor: ew-resize; .base{ position: absolute; width: 960px; height: 540px; top: 0; left: 0; background: url('../../static/image/kda-karsa-golden.jpg') no-repeat; background-size: 100%; } .left{ position: absolute; width: 480px; height: 540px; overflow: hidden; top: 0; left: 0; img{ width: 960px; height: 540px; } } } } </style>
以上是“如何使用Vue實(shí)現(xiàn)類(lèi)似Spring官網(wǎng)圖片滑動(dòng)效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。