jquery实现聚光灯效果的方法

来源：阅读：724 次日期：2015-02-10 14:22:13

温馨提示：小编为您整理了“jquery实现聚光灯效果的方法”,方便广大网友查阅！

这篇文章主要介绍了jquery实现聚光灯效果的方法,可实现鼠标滑过图片时显示当前图片高亮,其他图片变暗的聚光灯效果,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jquery实现聚光灯效果的方法。分享给大家供大家参考。具体分析如下：

有时网站需要用jquery实现一种图片聚光灯特效，当鼠标滑过单组中的单个图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效。其实现原理为首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。这里就来介绍如何用jquery实现聚光灯效果

jquery实现聚光灯效果图如下所示：

jquery实现聚光灯效果的方法

jquery代码

代码如下:

<!DOCTYPE>

<html>

<head>

<title>jquery聚光灯插件制作jquery图片特效鼠标滑过图片当前图片高亮</title>

</head>

<body>

*{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>

// 高亮效果

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 style="cursor:pointer;top:0;left:0;position:absolute;width:'+w+'px;height:'+h+'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></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>

更多信息请查看IT技术专栏

上一篇：JS实现文字向下滚动完整实例

下一篇：事半功倍系列 javascript

手机网站地址：jquery实现聚光灯效果的方法

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！