jQuery實(shí)現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果
更新時間：2013年07月16日 18:03:46 作者：
本文為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn)鼠標(biāo)滑過遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見到過，下面是具體的示例，感興趣的各位可以參考下哈，希望對大家有所幫助
復(fù)制代碼 代碼如下:
<!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>
效果圖如下：
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動展開與隱藏效果
- jquery實(shí)現(xiàn)鼠標(biāo)滑過后動態(tài)圖片提示效果實(shí)例
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)滑過按鈕改變背景圖片
- jQuery幻燈片特效代碼分享 鼠標(biāo)滑過按鈕時切換（2）
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示提示框的方法
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jquery實(shí)現(xiàn)鼠標(biāo)滑過顯示二級下拉菜單效果
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過圖片移動特效
相關(guān)文章
這篇文章主要介紹了jQuery中height()方法用法,以實(shí)例形式較為詳細(xì)分析了height()方法返回元素高度的用法與相關(guān)注意事項(xiàng),具有一定的參考借鑒價值,需要的朋友可以參考下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焦點(diǎn)圖
本文給大家分享的是使用jQuery結(jié)合CSS3制作的仿獵豹瀏覽器寬屏banner焦點(diǎn)圖特效，代碼很簡單，效果卻非常棒，而且兼容各大瀏覽器，這里推薦給大家，有需要的小伙伴參考下。2015-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery事件用法，具有一定的參考價值，感興趣的朋友可以參考一下2016-10-10
同事在網(wǎng)上的找的下拉列表框出現(xiàn)位置不對的和加載慢的BUG，反正多選下拉列表框?qū)崿F(xiàn)也很簡單，與其看那些結(jié)構(gòu)混亂的代碼，不如自己重新實(shí)現(xiàn)一個2012-07-07
這篇文章主要介紹了jQuery?表單事件與遍歷詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
在群里看見有人貼出一個頁面問opacity不支持IE6，有什么好的支持方法沒。貼出第一眼就發(fā)現(xiàn)用了jq庫，當(dāng)場就想到了支持的。 但很多人回答用CSS濾鏡，當(dāng)我看到這個答案的時候。有些很吃驚。難道大家都不知道JQ是支持opacity兼容IE6+的嗎？ 開始他們都不相信。JQ怎么配合使用。于是就寫了一個簡單的代碼給他們。2013-03-03
基于jQuery的公告無限循環(huán)滾動實(shí)現(xiàn)代碼
今天看到一個網(wǎng)站的公告欄一個小效果，如果有2條公告或以上就有個滾動效果，特整理下分享給大家2012-05-05
有關(guān)easyui-layout中的收縮層無法顯示標(biāo)題的解決辦法
本文由腳本之家小編給大家介紹有關(guān)easyui-layout中的收縮層無法顯示標(biāo)題的原因分析及解決辦法，感興趣的朋友可以參考下2016-05-05