這篇文章主要介紹了jquery實(shí)現(xiàn)聚光燈效果的方法,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片時(shí)顯示當(dāng)前圖片高亮,其他圖片變暗的聚光燈效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jquery實(shí)現(xiàn)聚光燈效果的方法。分享給大家供大家參考。具體分析如下：
有時(shí)網(wǎng)站需要用jquery實(shí)現(xiàn)一種圖片聚光燈特效，當(dāng)鼠標(biāo)滑過(guò)單組中的單個(gè)圖標(biāo)時(shí)，當(dāng)前高亮，其它圖標(biāo)變暗的這種類(lèi)似圖片聚光燈特效。其實(shí)現(xiàn)原理為首先先讓鼠標(biāo)觸及到當(dāng)前圖片后，讓其他圖片全部透明化，然后顯示出當(dāng)前的提示語(yǔ)，當(dāng)鼠標(biāo)移開(kāi)以后隱藏當(dāng)前的提示語(yǔ)，讓所有的背景顏色的透明度變回正常。這里就來(lái)介紹如何用jquery實(shí)現(xiàn)聚光燈效果
jquery實(shí)現(xiàn)聚光燈效果圖如下所示：
jquery實(shí)現(xiàn)聚光燈效果的方法
jquery代碼
代碼如下:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery聚光燈插件制作jquery圖片特效鼠標(biāo)滑過(guò)圖片當(dāng)前圖片高亮</title>
<meta name="description" content="jquery聚光燈插件制作jquery圖片特效當(dāng)鼠標(biāo)滑過(guò)圖片時(shí)當(dāng)前圖片高亮顯示其余另外的圖片變暗。" />
</head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle}
/* lamp */
.lamp{height:366px;width:960px;position:relative;margin:0 auto;}
.lamp .sublight{position:absolute;display:block;overflow:hidden;}
.lamp .pic1{top:0;left:0;width:240px;height:366px;}
.lamp .pic2{top:0;left:240px;width:480px;height:183px;}
.lamp .pic3{top:0;left:720px;width:240px;height:183px;}
.lamp .pic4{top:183px;left:240px;width:240px;height:183px;}
.lamp .pic5{top:183px;left:480px;width:240px;height:183px;}
.lamp .pic6{top:183px;left:720px;width:240px;height:183px;}
</style>
<div>
<a target="_blank" href=""><img src="圖片URL"/></a>
<a target="_blank" href=""><img src="圖片URL"/></a>
<a target="_blank" href=""><img src="圖片URL"/></a>
<a target="_blank" href=""><img src="圖片URL"/></a>
<a target="_blank" href=""><img src="圖片URL"/></a>
<a target="_blank" href=""><img src="圖片URL"/></a>
</div>
<script type="text/javascript" src="jquery。js"></script>
<script type="text/javascript">
// 高亮效果
var blockHighLight = (function(window, $, undefined){
var markers = [];
return function(boxCls, itemCls, sizeArr){
var box = $(boxCls);
itemCls = itemCls || "a";
box.find(itemCls).each(function(i){
var self = $(this);
var arr,w,h,marker;
if(sizeArr !== undefined){
arr = sizeArr[i].split(",");
w = arr[0];
h = arr[1];
}else{
w = self.find("img").attr("width");
h = self.find("img").attr("height");
}
marker = $('<div></div>');
self.append(marker);
self.mouseover(function(){
for(var i=0; i<markers.length; i++){
markers[i].show().css({"opacity":'0.2',"filter":"alpha(opacity=20)"});
}
marker.hide();
});
markers.push(marker);
});
box.mouseout(function(){
for(var i=0; i<markers.length; i++){
markers[i].css({"opacity":'0',"filter":"alpha(opacity=0)"});
}
})
}
})(this, $);
blockHighLight(
".lamp", //父元素
".sublight", //子元素集
[
'240,366', //第一張圖片的寬高
'480,183', //第二張圖片的寬高
'240,183', //第三張圖片的寬高
'240,183', //第四張圖片的寬高
'240,183', //第五張圖片的寬高
'240,183' //第六張圖片的寬高
]
);
</script>
</body>
</html>