效果图：

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

效果可以通过 三步实现：

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="data:images/4.jpg" /><div class="display m1"></div></a>

<a href="#" class="pos_abs"><img src="data:images/2.jpg" /><div class="display m2"></div></a>

<a href="#" ><img src="data:images/3.jpg" /><div class="display m3"></div></a>

</div>

</body>

</html>

JQuery 实现鼠标经过图片高亮显示，其余图片变暗的更多相关文章

  1. 【jQuery】鼠标接触按钮后改变图片

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 鼠标经过的图片高亮显示，其余变暗效果[xyytit]

    初始代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. jquery实现鼠标移入移除背景图片切换

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

  4. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  5. jQuery实现鼠标经过图片变亮效果

    在线体验效果:http://hovertree.com/texiao/jquery/1.htm 以下是完整源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. jQuery的鼠标悬停时放大图片的效果

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  7. 一款基于jquery的鼠标经过图片列表特效

    今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览   源码下载 实现的代码 html代码: < ...

  8. jQuery实现鼠标经过图片预览大图效果

    jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...

  9. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

随机推荐

  1. Hibernate（一）JDBC简介

    在了解Hibernate之前,我们先回顾一下传统JDBC访问数据库的相关内容.重点在于分析JDBC访问存在哪些 缺陷,这些缺陷在Hibernate中是如何思考和解决的? JDBC主要对象 DriveM ...

  2. Hadoop yarn配置参数

    参照site:http://hadoop.apache.org/docs/r2.6.0/hadoop-yarn/hadoop-yarn-common/yarn-default.xml 我们在配置yar ...

  3. MacOS下的生活——RescueTime，时间规划利器

    前段时间Yxj同学给我推荐了一款可以记录电脑及手机使用时间分类的软件,据说Mac平台下也支持,当时就有了兴趣,但是好像因为什么事给耽搁了,知道今天下午看到Yxj在看这个软件记录的自己的时间表,才觉得这 ...

  4. hdu 4293 dp求最大权值不重合区间

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4293 #include<cstdio> #include<cstring> # ...

  5. bzoj1827 [Usaco2010 Mar]gather 奶牛大集会

    不就是移一下树根,回溯一下吗? 诶?黄学长为什么可以直接找? 诶?这不是重心吗? YY了一下证明 很简单 由于重心max{sz[v]} <= sz[u] / 2的性质,可以证明每一步远离重心的移 ...

  6. 【设计模式 - 17】之中介者模式（Mediator）

    1      模式简介 中介者模式的定义: 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显式地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互. 中介者模式中的组成部分: 1. ...

  7. 一款很不错的html转xml工具-Html Agility Pack

    之前发个一篇关于实现html转成xml的劣作<实现html转Xml>,受到不少网友的关心.该实现方法是借助htmlparser去分解html内容,然后按照dom的结构逐个生成xml字符串. ...

  8. 银行B2C直连

    银行B2C直连: 1. 银联B2C直连流程: 注: 所有银行B2C接入方式均为此流程. 不同银行只是签名及验签方式不一致,请求及返回参数不一样,其他的一致. 2. 银行B2C支付请求: 交易流程: ( ...

  9. 亲测linux6.4 安装

    1.bios下点击 u盘 启动进入(两个Flash1.0,都试试) 2.最关键的部分是,不如windows启动 没有linux界面. others(只是把这个修改一下名字为windows7) cent ...

  10. 【Android】数据的应用-使用sharedpreferences存储数据

    Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的 ...