熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery實現鼠標滑過遮罩並高亮顯示效果

2013-11-15 12:03:08  來源: JSP教程 
本文為大家詳細介紹下使用jQuery實現鼠標滑過遮罩高亮顯示效果想必這種效果在網上大家都有見到過下面是具體的示例感興趣的各位可以參考下哈希望對大家有所幫助   復制代碼 代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>鼠標滑過遮罩高亮效果</title>
<style>
*{padding:;margin:;}
ulli{liststyle: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]");
conAryeach(function(){
var $this = $(this);
var els = $("a" $this);
elseach(function(){
var el = $(this);
elmouseover(function() {
elscss({ "opacity": });
elanimate({ "opacity": });
});
});
$thismouseout(function() {
elscss("opacity" );
});
});
});
</script>
</head>
<body>

<ul class="picshow" name="h_light">
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>
<li><a href="://piccn/upload//jpg" ></a></li>

</ul>
</body>
</html>

  
效果圖如下


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20170.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.