js鼠標懸浮出現遮罩層的方法

本文實例講述了js鼠標懸浮出現遮罩層的方法。分享給大家供大家參考。具體實現方法如下：

html頁面代碼：

複製代碼代碼如下:<ul>

<li><a data-title="科學" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">

</i><span>科學</span> </a></li>

<li><a data-title="動漫" href="#"><i style="background-image: url(images/xiaozhan/main_NH8v_2e310001ebd1118e.jpg)">

</i><span>動漫</span> </a></li>

<li><a data-title="生活" href="#"><i style="background-image: url(images/xiaozhan/main_OtnR_43a60000050a118c.jpg)">

</i><span>生活</span> </a></li>

<li><a data-title="插畫" href="#"><i style="background-image: url(images/xiaozhan/main_UD3z_2e510002074f118e.jpg)">

</i><span>插畫</span> </a></li>

<li><a data-title="音樂" href="#"><i style="background-image: url(images/xiaozhan/main_krFk_6323000018bd125d.jpg)">

</i><span>音樂</span> </a></li>

<li><a data-title="自然" href="#"><i style="background-image: url(images/xiaozhan/main_UAbs_764f0001ff601190.jpg)">

</i><span>自然</span> </a></li>

</ul>

js代碼：

複製代碼代碼如下:<script type="text/javascript">

$(function () {

//遮罩層，鼠標移動上去高度變化，變清晰

var $site_li = $(".site-tag li");

$site_li.hover(function () {

var indexs = $site_li.index(this);

$(this).css("height", "90").find(".tag-tit").css("top", "30").css("color", "#fff");

//獲取當前點擊li元素在全部li元素中的索引

//alert(indexs+1);

$(this).prev().css("height", "30");

$(this).next().css("height", "30");

}, function () {

$site_li.css("height", "50");

});

});

</script>

css代碼：

複製代碼代碼如下:ul li{ list-style:none;}

.site-tag{ width:200px; overflow:hidden; z-index:5;}

.site-tag li{ position:relative; width:200px; height:50px; margin-bottom:1px; overflow:hidden;

transition:height 0.5s ease; -webkit-transition:height 0.5s ease;

-moz-transition:height 0.5s ease; -o-transition:height 0.5s ease;}

.site-tag li a { color: #666; font-size: 16px; font-weight: bold;line-height: 50px;}

.site-tag li i{ display:block; height:90px; background-position:center center;

opacity:0.3; filter:alpha(opacity=3); /*設置透明度*/

-webkit-transition:opacity 0.5 ease; /**/

-webkit-filter:grayscale(60%); /**/

}

.site-tag li:hover i { opacity:0.9; -webkit-filter:grayscale(0%); transition:opacity 0.5s ease;}

.tag-tit{ display:block; height:100px; width:700px; color:#666; font-size:14px;}

.site-tag li .tag-tit{ position:absolute; top:0px; left:10px; text-shadow:1px 1px 1px rgb(0,0,0,0.1);}

a:hover .tag-tit{ text-shadow:1px 1px 1px rgb(0,0,0,0.5);}

希望本文所述對大家的javascript程序設計有所幫助。