本文為大家詳細介紹下使用jQuery實現鼠標滑過遮罩高亮顯示效果
想必這種效果在網上大家都有見到過
下面是具體的示例
感興趣的各位可以參考下哈
希望對大家有所幫助
復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>鼠標滑過遮罩高亮效果</title>
<style>
*{padding:
;margin:
;}
ul
li{list
style:none;}
picshow{float:left;padding:
px
;width:
px;position:relative;}
picshow li{float:left;height:
px;width:
px;background:
;}
picshow li img{height:
px;width:
px;}
picshow li a{display:block;}
</style>
<script type="text/javascript" src="
<script type="text/javascript">
$(function() {
var conAry = $("[name=h_light]");
conAry
each(function(){
var $this = $(this);
var els = $("a"
$this);
els
each(function(){
var el = $(this);
el
mouseover(function() {
els
css({ "opacity":
});
el
animate({ "opacity":
});
});
});
$this
mouseout(function() {
els
css("opacity"
);
});
});
});
</script>
</head>
<body>
<ul class="picshow" name="h_light">
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
<li><a href="://pic
cn/upload/
/
jpg" ></a></li>
</ul>
</body>
</html>
效果圖如下
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20170.html
