效果图：

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

效果可以通过 三步实现：

1、排列图片

图片位置：DIV+CSS

2、添加遮罩

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

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

3、鼠标事件

鼠标经过hover 事件：JQuery

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

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

效果图源代码如下：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script src="style/jquery-1.4.2.min.js"></script>
  5. <style type="text/css">
  6. .pos_abs{position:absolute;}
  7. .pic{position:absolute;}
  8. .display  {position:absolute;background:#000;opacity:0;filter:alpha(opacity=0);}
  9. .m1 {left:0;top:0;width:480px;height:360px;}
  10. .m2 {left:0;top:0;width:300px;height:150px;}
  11. .m3 {left:490px;top:150px;width:300px;height:210px;}
  12. </style>
  13. <script>
  14. $(function() {
  15. $(".pic").find("a").each(function() {
  16. $(this).hover(function() {
  17. $(this).siblings().find(".display").stop();
  18. $(this).siblings().find(".display").fadeTo("fast",0.3);
  19. },
  20. function() {
  21. $(this).siblings().find(".display").stop();
  22. $(this).siblings().find(".display").fadeTo("fast",0);
  23. });
  24. });
  25. })
  26. </script>
  27. </head>
  28. <body>
  29. <div class="pic">
  30. <a href="#" ><img src="data:images/4.jpg" /><div class="display m1"></div></a>
  31. <a href="#" class="pos_abs"><img src="data:images/2.jpg" /><div class="display m2"></div></a>
  32. <a href="#" ><img src="data:images/3.jpg" /><div class="display m3"></div></a>
  33. </div>
  34. </body>
  35. </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. ACM3787

    /* 问题说明 给定两个整数A和B,其表示形式是:从个位开始, 每三位数用逗号","隔开. 现在请计算A+B的结果,并以正常形式输出. 输入 输入包含多组数据数据,每组数据占一行, ...

  2. sonarQube本机扫描C#项目

    因项目需要,需要使用sonarQube对代码进行扫描并查看,因对sonarQube不熟悉,所以先在本机进行查看. 参考了张老师的博客:http://www.cnblogs.com/danzhang/p ...

  3. array_column php 函数 自定义版本 php_version<5.5

    <?php if(!function_exists('array_column')) { /* * array_column() for PHP 5.4 and lower versions * ...

  4. Python脚本运行出现语法错误：IndentationError: unindent does not match any outer indentation level（转）

    [问题] 一个python脚本,本来都运行好好的,然后写了几行代码,而且也都确保每行都对齐了,但是运行的时候,却出现语法错误: IndentationError: unindent does not ...

  5. [RxJS] Filtering operators: take, first, skip

    There are more operators in the filtering category besides filter(). This lesson will teach how take ...

  6. cflow察看工程函数调用关系+Linux 0.11 内核实验环境

    http://savannah.gnu.org/projects/cflow http://tinylab.org/linux-0.11-lab/ http://ftp.gnu.org/gnu/cfl ...

  7. Qt 学习之路：深入 Qt5 信号槽新语法

    在前面的章节(信号槽和自定义信号槽)中,我们详细介绍了有关 Qt 5 的信号槽新语法.由于这次改动很大,许多以前看起来不是问题的问题接踵而来,因此,我们用单独的一章重新介绍一些 Qt 5 的信号槽新语 ...

  8. css 权威指南笔记（ 五）结构和层叠

    特殊性 重要性 !important; 继承 向上传播例外,应用到body元素的背景样式可以传递到html元素,相应对的可以定义其画布. 大多数框模型属性(包括外边距.内边距.背景.边框)都不能继承 ...

  9. AndroidStudio工程文件导入Jar包和So第三方库

    AndroidStudio 导入Jar包和第三方So库 在android开发中,需要导入许多第三方的jar包和so库来支持,包括像许多第三方的支持平台--友盟,环信.融云.极光推送.微博.腾讯等第三方 ...

  10. javascript中，你真的会用console吗？

    使用console进行性能测试和计算代码运行时间 对于前端开发人员,在开发过程中经常需要监控某些表达式或变量的值,如果使用用debugger会显得过于笨重,最常用的方法是会将值输出到控制台上方便调试. ...