JQuery 实现鼠标经过图片高亮显示,其余图片变暗

效果图:

当鼠标经过图片时,其余图片变暗,来高亮显示当前图片,主要用的是对比度。当然你也可以先把其他图片默认变暗,鼠标经过时高亮显示,不过,无鼠标经过时整体图片都会是偏暗色调。

效果可以通过 三步实现:

1、排列图片

     图片位置:DIV+CSS

2、添加遮罩

     遮罩设置+透明度设置:  CSS

 filter:alpha(opacity=30);  /* IE 浏览器支持 */ ;
-moz-opacity:0.3; /* 遨游浏览器 火狐浏览器 支持 */ ;
opacity: 0.3; /* 支持CSS3的浏览器(FF 1.5也支持)*/”>

3、鼠标事件

     鼠标经过hover 事件:JQuery

     当图片有多张时,鼠标滑动到某一张图片,其他所有图片的透明度都要变暗,这就需要通过JQuery 的 siblings() 方法来遍历所有图片元素,使用 fadeTo() 方法将被选元素的不透明度逐  渐地改变为指定的值,达到整体变暗,局部高亮的效果。

    

$(this).hover(function() {
$(this).siblings().find(".display").stop();      //找到当前元素的后代,筛选出 class 为 display 的元素,停止活动
$(this).siblings().find(".display").fadeTo("fast",0.3);   //让当前元素的后代中class为display的元素的透明度变为0.3

}

 

效果图源代码如下:

<!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>
<script src="style/jquery-1.4.2.min.js"></script>
<style type="text/css">
.pos_abs{position:absolute;}
.pic{position:absolute;}
.display  {position:absolute;background:#000;opacity:0;filter:alpha(opacity=0);}
.m1 {left:0;top:0;width:480px;height:360px;}
.m2 {left:0;top:0;width:300px;height:150px;}
.m3 {left:490px;top:150px;width:300px;height:210px;}
</style>
<script>
$(function() {
$(".pic").find("a").each(function() {
$(this).hover(function() {
$(this).siblings().find(".display").stop();
$(this).siblings().find(".display").fadeTo("fast",0.3);
},
function() {
$(this).siblings().find(".display").stop();
$(this).siblings().find(".display").fadeTo("fast",0);
});
});
})
</script>
</head>
<body>
<div class="pic">
<a href="#" ><img src="images/4.jpg" /><div class="display m1"></div></a>
<a href="#" class="pos_abs"><img src="images/2.jpg" /><div class="display m2"></div></a>
<a href="#" ><img src="images/3.jpg" /><div class="display m3"></div></a>
</div>
</body>
</html>

 

   

JQuery 实现鼠标经过图片高亮显示,其余图片变暗,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。