初始代码：

 <!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" xmlns:wb="http://open.weibo.com/wb"><head>

       <title></title>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript">

           $(function () {

               $("div").hover(

         function (oEvent) {

             $("div").css("opacity", "0.45");

             //第一个函数相当于mouseover事件监听

             $(oEvent.target).css("opacity", "0");

         },

         function (oEvent) {

             //第二个函数相当于mouseout事件监听

             $("div").css("opacity", "0");

         }

     );

           });

 </script>

 <style type="text/css">

 .float-panel{width:980px;}

 .float-panel li a img {

 float: left;

 }

 .mask-layer {

 background: #000;

 filter: alpha(opacity=0);

 opacity: 0;

 cursor: pointer;

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100%;

 transition: opacity .2s linear;

 -webkit-transition: opacity .2s linear;

 -moz-transition: opacity .2s linear;

 }

 .float-panel li a {

 position: relative;

 display: block;

 zoom: 1;

 overflow: hidden;

 }

 li{float:left;list-style:none;}

 </style>

 </head>

 <body>

 <ul class="float-panel" >

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

          </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

     <li>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

     </li>

 </ul>

 </body></html>

简易代码：

 <!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" xmlns:wb="http://open.weibo.com/wb"><head>

       <title></title>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>

       <script type="text/javascript">

           $(function () {

               $(".float-panel div").hover(

         function (oEvent) {

             $(".float-panel div").css("opacity", "0.45");

             //第一个函数相当于mouseover事件监听

             $(oEvent.target).css("opacity", "0");

         },

         function (oEvent) {

             //第二个函数相当于mouseout事件监听

             $(".float-panel div").css("opacity", "0");

         }

     );

 });

 </script>

 <style type="text/css">

 .float-panel{width:980px;}

 .mask-layer{

 background: #000;

 filter: alpha(opacity=0);

 opacity: 0;

 cursor: pointer;

 position: absolute;

 left: 0;

 top: 0;

 width: 100%;

 height: 100%;

 transition: opacity .2s linear;

 -webkit-transition: opacity .2s linear;

 -moz-transition: opacity .2s linear;

 }

 .float-panel a {

 position: relative;

 display: block;

 zoom: 1;

 overflow: hidden;

 float:left;

 }

 </style>

 </head>

 <body>

 <div class="float-panel" >

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B1.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B2.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

          </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B3.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B4.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

         <a href="#" target="_blank">

             <img alt=" " src="http://r1.ytrss.com/channel/tmpd/20131104B5.jpg">

             <div class="mask-layer" style="opacity: 0;"></div>

         </a>

 </div>

 </body></html>

鼠标经过的图片高亮显示，其余变暗效果[xyytit]的更多相关文章

  1. JS实现 鼠标放上去 图片自动放大的效果

    前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...

  2. 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  3. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. [读码][js,css3]能感知鼠标方向的图片遮罩效果

    效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...

  6. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

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

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

  9. Android:通过滤镜实现点击图片变暗效果

    实现点击图片(ImageView)变暗效果,有一个较简单的方法,就是讲目标图片设置为背景图片(setBackground),再创建一个selector.xml文件,里面放置一张普通状态时的透明图片,一 ...

随机推荐

  1. 【转载】Keepalived安装使用详解

    转自:http://www.cnblogs.com/MacoLee/p/5853356.html 简介 Keepalived是一个基于VRRP协议来实现的服务高可用方案,可以利用其来避免IP单点故障, ...

  2. sentinel服务器出现大量的连接问题【转载】

    一.问题现象 redis服务端的sentinel模块存在大量的established状态的连接,并且这些连接一直不被释放,而客户端的连接数正常. 二.问题排查过程 1.根据连接状态进行推断 服务端存在 ...

  3. Hadoop(1.2.1)安装

    背景知识: 1.数据分布存储,不是复制存储 2.数据不动,代码动,由于分布式存储,所以把代码移动到数据的地方计算. 3.数据如何分割,hadoop提供的分割文件的编程接口 安装: 1.安装JDK 1. ...

  4. Solr如何使用in语法查询

    Solr可以用AND.||  布尔操作符 表示查询的并且, 用OR.&&  布尔操作符 表示或者 用NOT.!.-(排除操作符不能单独与项使用构成查询)表示非 如果要用在查询的时候使用 ...

  5. Solr学习总结（六）solr的函数查询Function Queries

    摘要: 函数查询允许你使用一个或多个数字字段的真实值生成一个相关性分数,函数查询在standard,DisMax,eDisMax下都能使用. 查询函数可以是常量,字段或者其他函数的组合.使用函数可以影 ...

  6. 代码：cookie（一个广告展示例子）

    这个小例子的要求是: 用户第一次进入,显示大图,2秒后大图动画关闭,再把小图动画展开: 用户再次进入后,只显示静态小图. 做法: 定义一个容器 .img201512ad,宽高写死:1190x70.—— ...

  7. OpenCL 图像卷积 3 使用 CPU

    ▶ CPU 图像卷积,共四种方法.分别为基本串行,使用模板,使用局部内存,使用AVX指令优化 ● 全部的代码,仅在主函数中选择调用的函数名即可. #include <stdio.h> #i ...

  8. sqoop1的安装以及数据导入导出测试

    下载 wget http://mirror.bit.edu.cn/apache/sqoop/1.4.7/sqoop-1.4.7.bin__hadoop-2.6.0.tar.gz 解压 tar -zxf ...

  9. 使用示例带你提前了解 Java 9 中的新特性

    使用示例带你提前了解 Java 9 中的新特性 转载来源:https://juejin.im/post/58c5e402128fe100603cc194 英文出处:https://www.journa ...

  10. C# 获取文件名、目录、后缀、无后缀文件名、扩展名、根目录等

    [csharp] view plain copy class Program { static void Main(string[] args) { //获取当前运行程序的目录 string file ...