您的位置：首页 > Web前端 > JQuery

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

2015-04-09 10:58 537 查看

http://www.iteye.com/topic/1125861

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<meta name="description" content="jquery聚光灯插件制作jquery图片特效当鼠标滑过图片时当前图片高亮显示其余另外的图片变暗。jquery插件,jquery下载。" />

</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 class="lamp">

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic1"><img src="images/dudu.jpg" title="DUDU 源自意大利的真皮风尚"></a>

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic2"><img src="images/event_02.jpg" title="浪美自由行走间的风尚标" /></a>

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic3"><img src="images/gb3.jpg" title="戈尔本成就男士商务之旅"></a>

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic4"><img src="images/zne.jpg"title="卓妮尔当优雅与摩登不期而遇"></a>

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic5"><img src="images/fbs2.jpg"title="梵贝斯来自东京武藏野设计"></a>

<a target="_blank" href="http://www.17sucai.com/" class="sublight pic6"><img src="images/xxbm2.jpg"title="希夏邦马运动与旅行的完美结合"></a>

</div>

<script type="text/javascript" src="js/jquery-1.4.2.min.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 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航