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>
代码并不好看，不过用于作为示例是再好不过了，主要原理是图片随鼠标进行偏移，所以造成这样的效果