jQuery實現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果

更新時間：2013年07月16日 18:03:46 作者：

本文為大家詳細(xì)介紹下使用jQuery實現(xiàn)鼠標(biāo)滑過遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見到過，下面是具體的示例，感興趣的各位可以參考下哈，希望對大家有所幫助

 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>鼠標(biāo)滑過遮罩高亮效果</title> 
<style> 
*{padding:0;margin:0;} 
ul,li{list-style:none;} 
.picshow{float:left;padding:4px 0;width:760px;position:relative;} 
.picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000;opacity:0.9;} 
.picshow li img{height:160px;width:190px;} 
.picshow li a{display:block;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<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": 0.6}); 
el.animate({ "opacity": 0.9 }); 
}); 
}); 
$this.mouseout(function() { 
els.css("opacity", 1); 
}); 
}); 
}); 
</script> 
</head> 
<body> 

<ul class="picshow" name="h_light"> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a  target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 

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

效果圖如下：

您可能感興趣的文章:

相關(guān)文章

jQuery中height()方法用法實例
這篇文章主要介紹了jQuery中height()方法用法,以實例形式較為詳細(xì)分析了height()方法返回元素高度的用法與相關(guān)注意事項,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
這篇文章主要介紹了jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解,需要的朋友可以參考下
2014-12-12
解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法
這篇文章主要為大家詳細(xì)介紹了解決jQuery上傳插件Uploadify出現(xiàn)Http Error 302錯誤的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery+css3動畫屬性制作獵豹瀏覽器寬屏banner焦點圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點圖特效，代碼很簡單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。
2015-03-03
jQuery事件用法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery事件用法，具有一定的參考價值，感興趣的朋友可以參考一下
2016-10-10
基于jquery的可多選的下拉列表框
同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實現(xiàn)一個
2012-07-07
jQuery?表單事件與遍歷詳情
這篇文章主要介紹了jQuery?表單事件與遍歷詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
IE6下opacity與JQuery的奇妙結(jié)合
在群里看見有人貼出一個頁面問opacity不支持IE6，有什么好的支持方法沒。貼出第一眼就發(fā)現(xiàn)用了jq庫，當(dāng)場就想到了支持的。但很多人回答用CSS濾鏡，當(dāng)我看到這個答案的時候。有些很吃驚。難道大家都不知道JQ是支持opacity兼容IE6+的嗎？開始他們都不相信。JQ怎么配合使用。于是就寫了一個簡單的代碼給他們。
2013-03-03
基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼
今天看到一個網(wǎng)站的公告欄一個小效果，如果有2條公告或以上就有個滾動效果，特整理下分享給大家
2012-05-05
有關(guān)easyui-layout中的收縮層無法顯示標(biāo)題的解決辦法
本文由腳本之家小編給大家介紹有關(guān)easyui-layout中的收縮層無法顯示標(biāo)題的原因分析及解決辦法，感興趣的朋友可以參考下
2016-05-05