首页新闻找找看学习计划

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>

既然如此为什么还要加一个遮罩层呢

遥遥小公主的主页 遥遥小公主 | 菜鸟二级 | 园豆:202
提问于:2019-05-10 11:19

建议你创建一个 jsfiddle 来更好的描述自己的问题: https://jsfiddle.net/

不如隐茶去 5个月前
< >
分享
所有回答(3)
0

加遮罩,是提示用户,现在有个东西弹出来了,可以看看,然后遮罩下面的内容不可查看/点击。 在然后点击遮罩可以关闭当前弹出的内容。

如果多次点击按钮,弹出内容,那不是乱套了么

czd890 | 园豆:7028 (大侠五级) | 2019-05-10 14:23
0

简单回答:人性化

Mr·林 | 园豆:201 (菜鸟二级) | 2019-05-10 14:39
0

显得更人性化,显示你当前放大的这块区域

迷茫的求知者 | 园豆:182 (初学一级) | 2019-05-10 15:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册