初始代码：

 <!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. [转] Maven.pom.xml 配置示例

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  2. MySQL Binlog三种格式介绍及分析

    Mysql binlog日志有三种格式,分别为Statement,MiXED,以及ROW! 1.Statement:每一条会修改数据的sql都会记录在binlog中. 优点:不需要记录每一行的变化,减 ...

  3. ubuntu14.04 login loop issue

    无法进入图形界面的所有问题几乎都碰到了,可惜尝试所有办法,还是各种broken packages 等,无法重装 ubuntu-desktop 成功. 耽误了2天,果断决定重装系统算了..尽管很多软件, ...

  4. iOS 基础

    layoutSubviews: layoutSubviews是对sbuviews的重新布局,比如,我们想更新子视图的位置,可以通过调用layoutSubviews方法(不能直接调用) layoutSu ...

  5. 第8章 信号（1）_Linux信号处理机制

    1. 信号的基本概念 1.1 基本概念 (1)信号(signal)机制是linux系统中最为古老的进程之间的通信机制,解决进程在正常运行过程中被中断的问题,导致进程的处理流程会发生变化. (2)信号本 ...

  6. JS 传各种文件到后端

    由于要写一个前端上传文件按钮功能,本人前端是小白,所以在网上搜索了许多,发现FileReader非常好用. 不多BB,直接来. 1,前端只需要一个input标签, <input type=&qu ...

  7. python内置函数详细介绍

    知识内容: 1.python内置函数简介 2.python内置函数详细介绍 一.python内置函数简介 python中有很多内置函数,实现了一些基本功能,内置函数的官方介绍文档:    https: ...

  8. python拓展1 week1-week5复习回顾

    知识内容: 1.python基础概念及基础语法 2.python基础数据类型 3.python模块相关 4.python函数相关 5.python面向对象相关 6.python文件处理相关 注:本节内 ...

  9. 2018-2019-2 《网络对抗技术》Exp4 恶意代码分析 Week6 20165233

    Exp4 恶意代码分析 实验内容 一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 使用wi ...

  10. django-插件django REST framework,返回序列化的数据

    官网: http://www.django-rest-framework.org 1.安装 pip install djangorestframework 2.在setting.py中注册app 中添 ...