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

初始代码：

 <!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]的更多相关文章

JS实现鼠标放上去图片自动放大的效果
前段时间做项目,要实现,一张图片,鼠标放上去图片自动变大的效果,虽然难度不大,但当时也想了一段时间,当时没时间记录一下,现在有时间了,写篇博客把代码给记录一下: 效果如下: 代码如下: <!DO ...
杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果
图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方引个流,欢迎去我的博客看看:http://blog.cxycs.co ...
鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
[读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
基于jquery鼠标点击图片翻开切换效果
基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=&quo ...
jQuery实现鼠标经过图片预览大图效果
jQuery:是一种客户端的技术,它的诞生的理由是:write less,do more(写更少的代码,做更多的事情). 因此,我们可以借助jQuery来实现一些很酷炫的效果,相比于javaScrip ...
Android:通过滤镜实现点击图片变暗效果
实现点击图片(ImageView)变暗效果,有一个较简单的方法,就是讲目标图片设置为背景图片(setBackground),再创建一个selector.xml文件,里面放置一张普通状态时的透明图片,一 ...

随机推荐

python 使用selenium和requests爬取页面数据
目的:获取某网站某用户下市场大于1000秒的视频信息 1.本想通过接口获得结果,但是使用post发送信息到接口,提示服务端错误. 2.通过requests获取页面结果,使用html解析工具,发现麻烦而 ...
更喜欢从一而终？bing测试在新窗口打开链接遭美国网友痛批
原链接地址:http://www.cnbeta.com/articles/186529.htm 我们都知道在中国网站点击一个链接之后,默认在新窗口或新标签打开,大家也很熟悉 ...
tsql 循环id读取
declare @IDList as varchar(max) declare @ID as int declare @i as int set @IDList='' )) + ',' from ta ...
sklearn-MultinomialNB朴素贝叶斯分类器
原型 class sklearn.naive_bayes.MultinomialNB(alpha=1.0, fit_prior=True, class_prior=None) 参数 Parameter ...
JavaScript中的闭包与匿名函数
知识内容: 1.预备知识 - 函数表达式 2.匿名函数 3.闭包一.函数表达式 1.定义函数的两种方式函数声明: 1 function func(arg0, arg1, arg2){ 2 // 函 ...
解决问题E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)
在用sudo apt-get install 安装软件时,结果终端提示: “E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用) E: 无法锁定管理目录(/ ...
python json.loads json.dumps(ensure_ascii = False) 汉字乱码问题解决
python 转换为json时候汉字编码问题 2017年03月23日 18:50:04 阅读数:5604 有这样一个需求: 需要一个json 文件数据从数据库里查询出来 1. 设置文件头 # -* ...
8. myeclipse10 svn插件安装
1.在myeclipse安装目录下找到dropins文件夹,并在下面创建svn文件夹 2. 解压site-1.8.22.zip 3. 4. 5. 6.
60. vbe6ext.olb 不能被加载
找到C:\Program Files\Common Files\Microsoft Shared\VBA\路径: 把VBA6文件夹下面的VBE6.DLL改为:VBE7.DLL (如果没有VBA6文件夹 ...
leetcode938
class Solution: def __init__(self): self.li = [] def midSearch(self,node): if(node != None): self.mi ...

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

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

随机推荐

热门专题