在Web頁(yè)面設(shè)計(jì)中，我們經(jīng)常需要用到遮罩層來實(shí)現(xiàn)圖片或其他元素的鼠標(biāo)經(jīng)過效果。jQuery是一個(gè)非常流行的JavaScript庫(kù)，可以幫助我們輕松實(shí)現(xiàn)這種效果。
首先，我們需要在HTML中創(chuàng)建一個(gè)包含圖片的容器，并加上遮罩層。
<div class="container"><img src="image.jpg" alt="image"><div class="overlay">
接下來，在CSS中完成容器和遮罩層的樣式設(shè)置。
.container {
position: relative; /*保證遮罩層能夠蓋住圖片*/
}
.overlay {
position: absolute; /*設(shè)為絕對(duì)定位*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /*設(shè)置半透明黑色*/
opacity: 0; /*初始時(shí)透明度為0*/
transition: opacity 0.5s; /*設(shè)置過渡動(dòng)畫效果*/
}最后，在jQuery中添加鼠標(biāo)經(jīng)過事件處理程序，并設(shè)定遮罩層的透明度變化。
$(document).ready(function() {
$('.container').hover(
function() {
$(this).find('.overlay').css('opacity', '1');
},
function() {
$(this).find('.overlay').css('opacity', '0');
}
);
});現(xiàn)在，當(dāng)鼠標(biāo)經(jīng)過圖片時(shí)，遮罩層就會(huì)逐漸變?yōu)榘胪该骱谏瑢?shí)現(xiàn)了簡(jiǎn)單而炫酷的效果。