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>
既然如此为什么还要加一个遮罩层呢
所有回答(4)
0
加遮罩，是提示用户，现在有个东西弹出来了，可以看看，然后遮罩下面的内容不可查看/点击。 在然后点击遮罩可以关闭当前弹出的内容。
如果多次点击按钮，弹出内容，那不是乱套了么
0
简单回答：人性化
0
显得更人性化，显示你当前放大的这块区域
0
为了更人性化，突出你弹出的内容，再说了，如果你不加遮罩层的话，你点击弹出层下边的东西是否应该生效呢？
建议你创建一个 jsfiddle 来更好的描述自己的问题： https://jsfiddle.net/
– 不如隐茶去 4年前