頁面布局的結構如下：

<div class="spec-preview"><img :src="xxx" /><div class="event" @mousemove="handler"></div><!-- 顯示放大的圖片 --><div class="big"><img :src="xxx" ref="big"/></div><!-- 遮罩層 --><div class="mask" ref="mask"></div></div>

css樣式如下(也可以自己修改樣式)：

.spec-preview {position: relative;width: 400px;height: 400px;border: 1px solid #ccc;.spec-preview img {width: 100%;height: 100%;}.event {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 998;}.mask {width: 50%;height: 50%;background-color: rgba(0, 255, 0, 0.3);position: absolute;left: 0;top: 0;display: none;}.big {width: 100%;height: 100%;position: absolute;top: -1px;left: 100%;border: 1px solid #aaa;overflow: hidden;z-index: 998;display: none;background: white;.big img {width: 200%;max-width: 200%;height: 200%;position: absolute;left: 0;top: 0;}}.event:hover~.mask,.event:hover~.big {display: block;} }

methods(即為實現代碼功能片段)如下:

methods: {handler(event) {let mask = this.$refs.mask;let big = this.$refs.big;//計算遮罩的左值以及頂部的值let left = event.offsetX - mask.offsetWidth / 2let top = event.offsetY - mask.offsetHeight / 2//判斷方位超出的情況if (left < 0) {left = 0} else if (left > mask.offsetWidth) {left = 200}if (top < 0) {top = 0} else if (top > mask.offsetHeight) {top = 200}//將遮罩以及big圖賦值定位 （此外big圖為普通圖的兩倍大小 且方位為負值）mask.style.left = left + 'px'mask.style.top = top + 'px'big.style.left = -2 * left + 'px'big.style.top = -2 * top + 'px'}}

難點在于big圖的img是普通圖的2倍且展示的方位與普通圖方位相反所以 *-2

最后實現如下如果：

?

總結

以上是生活随笔為你收集整理的Vue中实现图片放大镜效果代码 复制即可用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。