初始代码：

 <!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. [UE4]C++静态局部变量

    void testFunc() { ; // this only runs ONCE, even on // subsequent calls to testFunc()! cout << ...

  2. [转载]tornado.database添加PooledDB连接池功能

    转载自 http://chenxiaoyu.org/2009/12/01/python-tornado-dbutil.html tornado.database模块简单包装了下对MySQL的操作,短小 ...

  3. 修改 Docker-MySQL 容器的 默认用户加密规则

    背景介绍 今天开始做集成测试,需要把程序和环境重新部署在新的服务器上.项目的环境都是基于Docker来的,所以数据库也是选择从Docker官网上面拉官方的MySQL镜像.(Tag = 8.0.12) ...

  4. 6.15-初识JSP、javaweb

    一.javaweb web服务器 tomcat C/S 客户端/服务器 B/S 浏览器/服务器 URL: http协议 https 加密的协议 localhost 127.0.0.1 常用web服务器 ...

  5. HIbernate编程模型

    1.Hibernate: ORM框架,简化SQL开发,编程接口丰富,简化JDBC编程 2.有点: Lazy机制配合Fetch的HQL高级查询,提高开发效率 难点:理解Lazy与Fetch JOIN的原 ...

  6. hbase建表时 ERROR: java.io.IOException: Table Namespace Manager not ready yet, try again later

    其实解决不难,是因为时钟不同步,把每个节点切换到root用户下同步时钟就好了,在重启hbase!

  7. Spring中的ThreadPoolTaskExecutor

      在观察线上系统的运行情况下,发现在错误日志中有这类错误信息,org.springframework.core.task.TaskRejectedException,于是便对ThreadPoolTa ...

  8. Spring学习之AOP详解

    aop使用方式 @Aspect注解 wildcards通配符: * 匹配任意数量的字符 + 匹配指定类及其子类 .. 一般用于匹配任意数的子包或参数 operators运算符 && 与 ...

  9. 如何决定Web应用的线程池大小

    线程池(Thread Pool)在Web应用中线程池的大小决定了在任何一个时间点应用可以处理请求的并发数.如果一个系统收到的请求数超过了线程池的大小,那么超出的请求要么进入等待队列要么被拒绝.请注意, ...

  10. 8.rem适配

    <!DOCTYPE html> <!--lang="en" : 英语 :声明当前页面的语言类型.--> <html lang="en&quo ...