js+css实现隐藏图片展示
写这篇文章的想法是因为看到了别的站长(https://www.mmgal.com/)里面有个右键展示出隐藏福利的功能,非常感兴趣,稍微看了下,
写了个类似的,代码如下:
<html> <head> <title>测试用隐藏放大镜</title> </head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"> </script> <style> .magnifier { border-radius: 50%; padding: 0; margin: 0; background-image: url("http://blog.xiaofeng-working.xyz/wp-content/uploads/2018/11/153056.jpg"); position: absolute; cursor: none; display: none; border: 3px solid; border-color: white; } </style> <body> <div id='magnifier' class="magnifier"></div> </body> <script> let side_length = "200"; // 初始化长宽高 $("#magnifier").css('width', side_length); $("#magnifier").css('height', side_length); function updateMagnifier(event, radius = side_length) { $("#magnifier").css("background-position-x", -event.pageX); $("#magnifier").css("background-position-y", -event.pageY); $("#magnifier").css("top", event.pageY-radius/2); $("#magnifier").css("left", event.pageX-radius/2); } function displayMagnifier(display = true) { if (display) { $("body").css('cursor', 'none'); $("#magnifier").css("display", "block"); } else { $("#magnifier").css("display", "none"); $("body").css('cursor', 'auto'); } } // 禁止显示右键菜单 $("body").bind("contextmenu", ()=> { return false; }); // 右键点击绑定事件 $("body").mousedown((mouse) => { if (2 === mouse.button) { displayMagnifier(true); updateMagnifier(mouse); $("body").mousemove((e) => { updateMagnifier(e); }); } else { displayMagnifier(false); $("body").off('mousemove'); } }); </script> </html>
代码并不好看,不过用于作为示例是再好不过了,主要原理是图片随鼠标进行偏移,所以造成这样的效果