js实现放大镜效果为什么要加遮罩层呢
<!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>既然如此为什么还要加一个遮罩层呢
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4606/viewspace-3164059/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
