在網頁中，我們常常需要使用遮罩層來實現彈窗、圖片放大等功能，jQuery遮罩層插件在這方面有著很好的表現。下面是一個使用jQuery遮罩層插件實現的圖片放大效果的示例。
<!DOCTYPE html>
<html>
<head>
<title>jQuery遮罩層圖片放大效果</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/jquery.mask.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mask.min.js"></script>
<style>
.pic{
width: 200px;
height: 200px;
position: relative;
margin: 20px;
display: inline-block;
cursor: pointer;
background: url(img/pic.jpg) no-repeat;
background-size: cover;
}
.cover{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
}
.enlarge{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.enlarge img{
width: 600px;
height: 400px;
display: block;
margin: 0 auto;
}
.enlarge.show{
width: 600px;
height: 400px;
opacity: 1;
}
</style>
</head>
<body>
<div class="pic">
<div class="cover"></div>
<div class="enlarge">
<img src="img/pic_large.jpg">
</div>
</div>
<script>
$(function(){
$('.pic').on('click', function(){
$('.enlarge').addClass('show');
$('.cover').show();
});
$('.cover').on('click', function(){
$('.enlarge').removeClass('show');
$('.cover').hide();
});
$('.enlarge').mask({
maskBackground: '#333',
maskOpacity: 0.6,
clickClose: true
});
});
</script>
</body>
</html>我們先在HTML中添加一個圖片節點，包含一個遮罩層節點和一個放大圖節點。在CSS中對各個節點進行樣式設置。其中，通過設置圖片節點的cursor屬性為pointer來顯示鼠標手型，讓用戶可以點擊放大圖片。同時遮罩層和放大圖節點默認隱藏。在JS中，通過jQuery實現了點擊圖片節點時遮罩層和放大圖節點的顯示，點擊遮罩層時隱藏遮罩層和放大圖節點的功能。最后使用jQuery遮罩層插件對放大圖節點進行了遮罩層設置。