js实现放大镜效果为什么要加遮罩层呢

时间: 2019-05-10来源：博客园

前景提要

js实现放大镜效果为什么要加遮罩层呢
0 [待解决问题] 尝试了一下不加遮罩层，同样实现了效果，以下是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#manbox{height: 250px;width: 250px;border:2px solid #000;position: relative;}
.minbox{height: 70px;width: 70px;background: #0f0;position: absolute;display: none}
img{height: 100%;width: 100%;background: #00f}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="manbox">
<div class="minbox"></div>
<img src="images/1.jpg" alt="">
</div>
<script>
$('#manbox').hover(
function(){
$('.minbox').css('display','block');
},
function(){
$('.minbox').css('display','none');
}
)
$('#manbox').mousemove(function(e){
var wid = e.pageX;
var hei = e.pageY;
var that = $('.minbox');
that.css({top : hei - that.height() / 2,left : wid - that.width() / 2});
if(parseInt(that.css('top')) < 0){
that.css({top : 0})
}else if(parseInt(that.css('top')) > $(this).height() - that.height()){
that.css({top : $(this).height() - that.height()})
}
if(parseInt(that.css('left')) < 0){
that.css({left : 0})
}else if(parseInt(that.css('left')) > $(this).width() - that.width()){
that.css({left : $(this).width() - that.width()})
}
}) </script>
</body>
</html>
既然如此为什么还要加一个遮罩层呢 JavaScript 遥遥小公主 | 菜鸟二级 | 园豆： 202
提问于：2019-05-10 11:19 建议你创建一个 jsfiddle 来更好的描述自己的问题： https://jsfiddle.net/ – 不如隐茶去 1年前显示帮助
使用"Ctrl+Enter"可进行快捷提交，评论支持部分 Markdown 语法：[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(4) 0 加遮罩，是提示用户，现在有个东西弹出来了，可以看看，然后遮罩下面的内容不可查看/点击。在然后点击遮罩可以关闭当前弹出的内容。
如果多次点击按钮，弹出内容，那不是乱套了么 czd890 | 园豆：8909 (大侠五级) | 2019-05-10 14:23 编辑文本预览上传图片
Ctrl+Enter键快速提交 0 简单回答：人性化 Mr·林 | 园豆：240 (菜鸟二级) | 2019-05-10 14:39 编辑文本预览上传图片
Ctrl+Enter键快速提交 0 显得更人性化，显示你当前放大的这块区域迷茫_D | 园豆：182 (初学一级) | 2019-05-10 15:45 编辑文本预览上传图片
Ctrl+Enter键快速提交 0 为了更人性化，突出你弹出的内容，再说了，如果你不加遮罩层的话，你点击弹出层下边的东西是否应该生效呢？前进中的蜗牛 | 园豆：211 (菜鸟二级) | 2019-12-16 17:22 编辑文本预览上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要登录以后才能回答，未注册用户请先注册。

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据

热门排行

咨询电话（周一至周五9：00-18：00）