Vue实现放大镜，但是放大图片跟着鼠标移动

问题出现在：ref="big"放错位置，应该放在ing中

<template><div class="spec-preview"><img :src= imgObj.imgUrl /><div class="event" @mousemove="handler"></div><div class="big"  ref="big"><img :src= imgObj.imgUrl /></div><div class="mask" ref="mask"></div></div>
</template>

以下为完整写出商品放大镜代码：

<template><div class="spec-preview"><img :src= imgObj.imgUrl /><div class="event" @mousemove="handler"></div><div class="big"><img :src= imgObj.imgUrl  ref="big"/></div><div class="mask" ref="mask"></div></div>
</template>
methods:{handler(event){//遮罩层let mask = this.$refs.mask;let big = this.$refs.big;//遮罩层与图片左边框距离let left = event.offsetX - mask.offsetWidth/2;//遮罩层与图片右边框距离let top = event.offsetY - mask.offsetHeight/2;//约束范围--当遮罩层与左边距离小于0时，遮罩层的左边固定为0；//当图片的left超过offsetWidth时，则将他的左边固定为offsetWidthif(left<=0) left=0;if(left>=mask.offsetWidth) left=mask.offsetWidth;if(top<=0) top=0;if(top>=mask.offsetHeight) top=mask.offsetHeight;//修改元素的left和top的属性值mask.style.left = left + 'px';mask.style.top = top + 'px';//遮罩层向右移动时，放大图片往左走//这里需要查看img的width是big的几倍，以下为2倍big.style.left = - 2 * left+'px';big.style.top = - 2 * top + 'px';}}

Vue实现放大镜，但是放大图片跟着鼠标移动相关推荐

前端图片跟着鼠标跑，鼠标到哪图片到哪
电脑鼠标一般都是一个小箭头的图标,如果我们想要设置一个图片跟着鼠标走,鼠标移动图片跟着移动该怎么做呢? 效果如下: 代码如下: <!DOCTYPE html> <html lang= ...
jQuery实现图片跟着鼠标移动的效果
例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
js实现页面上的图片跟着鼠标箭头移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
图片跟着鼠标_百元鼠标玩设计雷柏V330游戏鼠标试用招募活动
「百元鼠标」在大多玩家的心中都应该是中规中矩,实用至上,堆料赚性价比,可没想到雷柏竟然可以在这个价位上玩起了「设计」,当中的细节不得让人拍案叫绝.到底百元鼠标能怎么玩?一起来跟着本个试用招募活动看看吧 ...
图片跟着鼠标_刷完几百张网易云Banner，我发现了2个PPT图片处理的大招！
大家好,这里是和秋叶一起学PPT~ 想必大家在学习 PPT 的道路上都或多或少,或坚持或佛系地收集过网易云音乐 Banner,更何况网易云音乐 Banner 常看常新,紧跟时下热点,简直不要太棒! ...
练手小项目——canvas放大镜效果放大图片
参考:canvas之放大镜效果_WHTGS的博客-CSDN博客_canvas 放大镜效果: 代码: <!DOCTYPE html> <html lang="en" ...
用vue实现，鼠标悬停放大图片，根据鼠标位置倾斜图片网页源码
大家好,今天给大家介绍一款,用vue实现的,鼠标悬停放大图片,并根据鼠标位置倾斜图片前端网页源码(图1).送给大家哦,获取方式在本文末尾. 图1 鼠标悬停放大图片,鼠标移动图片就会进行相应角度的倾斜, ...
点击放大图标，放大图片
如何将elementUI中的放大图片的事件修改成点击图标或者按钮点击放大图标,放大图片 <span class="addUnderline">模板1 (横向列表) & ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...

Vue实现放大镜，但是放大图片跟着鼠标移动

Vue实现放大镜，但是放大图片跟着鼠标移动

Vue实现放大镜，但是放大图片跟着鼠标移动相关推荐

最新文章

热门文章