JQ实现的放大镜大图因遮罩出现一闪一闪不显示问题

最新推荐文章于 2022-12-06 10:30:33 发布
最新推荐文章于 2022-12-06 10:30:33 发布
阅读量797 收藏 1
点赞数 5
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42033351/article/details/110377823
版权

JQ实现的放大镜大图因遮罩出现一闪一闪不显示问题

最近接收一个JQ的老项目有一个放大镜功能，看代码的时候发现是之前有人写过封装只是被注释掉了，以为就轻松了，这个需求简简单单实现了，然后测试时发现，随着鼠标滑动，大图一闪一闪的停下鼠标会有消失现象。

经排查发现是遮罩层的影响，去掉遮罩层就不会有问题，加上就闪烁

解决方法，给遮罩层的代码加上css3属性pointer-events: none;

pointer-events属性

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的hover和active状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件
学渣木云
关注
  • 5
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
js 放大镜 有bug
01-05
js 放大镜 有bug
jQuery关于移入移出鼠标，遮罩层闪烁的问题
weixin_42597658的博客
01-18 777
最近写的那个放大镜效果在ie浏览器兼容模式下出现了闪烁效果，由此去查询了jQuery的***mouseout***与***mouseover***事件的问题。 mouseout: 只要鼠标指针移出事件所绑定的元素或其子元素，都会触发该事件 mouseleave: 只有鼠标指针移出事件所绑定的元素时，才会触发该事件 如果没有子元素，那么该元素绑定两种事件效果没有区别，只会触发一次事件；如果绑定了mouseout事件的元素存在子元素，那么，每次移入该元素时都会触发一次事件（包括从外部移入
Magnification API-Windows放大镜
cyradg2008的博客
06-07 2077
Windows Vista系统之后引入了Magnification API函数，链库为Magnification.dll用于桌面放大，Win7系统只有以下函数： 1、MagInitialize：装载Magnification功能 2、MagUninitialize：卸载Magnification 功能 3、MagGetColorEffect：获取颜色配置 4、MagSetImageScalingCallback：获得捕获桌面图像数据回调函数 5、MagGetWindowFilterList：获取要（或者排除
js做放大镜时offsetX,offsetY抖动解决办法
desongzhang的博客
02-03 1681
在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-events: none; 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅仅代表,事件冒泡到outer层才会执行回调函数, offsetX参考系并不是outer, 其实event.offsetX是以event.tar
Web前端实现一个图片放大镜
jimojianghu的专栏
12-06 2917
基本完成了一个可以非固定尺寸、动态加载图片的放大镜功能。动态加载图片，可以不用考虑图片的像素宽高，任意尺寸的图片都可以完整放大，缩略小图和预览大图也可以是同一张图片。
CSS3点击图片遮罩放大显示特效
06-24
CSS3点击图片遮罩放大显示特效是一款支持点击放大显示图片特效下载。
CSS3点击图片遮罩放大显示特效.zip
07-11
CSS3点击图片遮罩放大显示特效是一款支持点击放大显示图片特效下载。
HTML5 CSS3按住鼠标图片遮罩放大显示代码.zip
07-11
js代码 [removed] $(document).on("mousemove", function(event) { $(".hole").css({ "top": event.pageY, ... 这是一款CSS3实现的支持点击按住鼠标左键图片遮罩放大显示代码，挺不错的CSS3图片特效。
CSS3悬停图片放大遮罩特效
07-24
CSS3悬停图片放大遮罩特效是一款CSS3 Clip-path属性制作的卡片悬停动画，图片模糊放大遮罩显示文字标题效果。
jquery插件，点击图片遮罩放大显示
04-09
jquery插件，包含js和css文件以及所需图片 点击图片遮罩放大显示 详细参考：https://blog.csdn.net/LuuvyJune/article/details/89153171
js实现放大镜
weixin_52412707的博客
04-20 384
完整版的html,css,js代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
js 放大镜用法bug解决
weixin_30776545的博客
08-23 497
<img id="zoom_02" src='img/zhang5.jpg' data-zoom-image="img/zhang5p.jpg" /></div> 这是鼠标放在一张小图上然后放上去有放大镜浏览一张大图的效果，但是这并不能操纵这个元素得在外面加一层div 操纵这个div 这听起来有点不可思议， 转载于:https://www.cnblogs.com/lidep...
jQuery 解决小图放大实例的闪烁效果
weixin_41664064的博客
03-21 482
jQuery 解决大图放大实例的闪烁效果 一、问题描述： 用jQuery 实现鼠标移入小图后，显示出大图： 实现代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../...
Js放大镜抖动问题
s2974240889的博客
08-09 531
js 的执行机制是从上到下的，我们在给小图片做mouseomve事件的时候，当鼠标移动到mask遮挡层的时候会消失因为给小图片上边做的事件，这样就会出现盒子有时候有有时候没有的，给小图片和Mask一个大盒子在做点击事件就可以了 ...
鼠标经过弹出遮罩层，但会一直闪烁
waillyer的博客
09-21 496
问题：鼠标经过弹出遮罩层，但会一直闪烁 解决：在弹出遮罩层的 CSS 里加上 pointer-events: none; <div class="noPeopleStatusCtlBox" @mouseenter="noPeopleStatusCtlonMouseoverEnvDelBtn()" @mouseleave="noPeopleStatusCtlonMouseleaveEnvDelBtn()">
前端必学——用JavaScript实现电商图片放大镜效果（附代码）
m0_60273757的博客
10-22 4560
前言 放大镜可以说是前端人必须学会的程序之一！今天本美女就用京东距离为大家展示一下怎么实现放大镜的效果！相比较html和css而言，js更重要的就是你需要想明白程序的思想以及怎么一步步实现自己的想法，话不多说开整！ 代码思想 HTML部分 主要是两个盒子： CSS部分 JavaScript部分 代码步骤 代码实现 百度网盘链接（图片及全部代码）：https://pan.baidu.com/s/1jS3V_GvzmC49PfTvZKN9Uw百度...
【原生JS】简单放大镜效果
zuncle的博客
02-08 2989
演示地址：点我<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0;
unity利用遮罩实现某一图层的内容只在遮罩区域内显示
最新发布
07-11
你可以使用 Unity 的遮罩组件来实现这个效果。下面是一种实现方法： 1. 首先，在 Unity 中...通过这种方法，你可以利用遮罩实现只在指定区域内显示某一图层的内容。希望对你有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值