PC端逛淘寶點(diǎn)進(jìn)商品詳情，鼠標(biāo)挪到圖片上右側(cè)可見(jiàn)鼠標(biāo)所到處細(xì)節(jié)放大，現(xiàn)在來(lái)掰扯掰扯↓↓↓↓↓↓

效果圖：

步驟解析：
1、創(chuàng)建一個(gè)大盒子，里面放左右兩個(gè)大小相同的盒子
2、左邊放入圖片、鼠標(biāo)遮罩層和圖片遮罩層，右邊放入圖片
3、寫樣式，左邊：圖片遮罩層和圖片大小一樣大，右邊：圖片給其大小超過(guò)左邊圖片，超出右邊容器的部分隱藏，具體樣式見(jiàn)底部
4、功能實(shí)現(xiàn)

HTML:

js:

代碼自提處：
js:

<script> export default {name: 'TheHome',data () {return {mouseMaskShow: false,imgMaskShow: false,mouseMove: { transform: ''},imgMove: {}}},methods: {mouseenterChange () {this.imgMaskShow = truethis.mouseMaskShow = true},mousemoveChange (i) {console.log('指針移動(dòng)', i)//鼠標(biāo)位置let x = i.offsetXlet y = i.offsetY//限制鼠標(biāo)層罩，限制其無(wú)法超出原圖區(qū)域左上角let topX = x - 100 < 0 ? 0 : x - 100let topY = y - 100 < 0 ? 0 : y - 100//限制鼠標(biāo)層罩，限制其無(wú)法超出原圖區(qū)域if (topX > 600) {topX = 600}if (topY > 400) {topY = 400}//通過(guò)tranform移動(dòng)鼠標(biāo)層罩和右側(cè)圖片位置this.mouseMove.transform = `translate(${topX}px,${topY}px)`this.imgMove.transform = `translate(-${0.5 * topX}px,-${0.7 * topY}px)`},mouseoutChange () {this.imgMaskShow = falsethis.mouseMaskShow = false}} } </script>

css:

<style scoped lang="scss">.the-home-container {.the-home-container-box-one {display: flex;height: 100%;width: 100%;.the-home-left {margin-right: 8px;width: 600px;height: 400px;border: 1px solid teal;.image-style {width: 600px;height: 400px;}.mouse-mask {width: 100px;height: 100px;background: rgba(158, 57, 48, 0.5);position: absolute;top: 8px;left: 8px;}.image-box-mask {width: 600px;height: 400px;position: absolute;z-index: 1;top: 8px;left: 8px;}}.the-home-right {margin-right: 8px;width: 600px;height: 400px;border: 1px solid pink;position: relative;overflow: hidden;.image-size-style {width: 1000px;height: 600px;position: absolute;top: 0;left: 0;}}}.the-home-container-box-two {width: 500px;height: 300px;}} </style>

總結(jié)

以上是生活随笔為你收集整理的Vue-实现商品放大镜效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。