鼠标经过的图片高亮显示，其余变暗效果[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文件,里面放置一张普通状态时的透明图片,一 ...
随机推荐
- Jade模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- unity3d工程下的data file作用
projectData文件夹中的data file: 1. Player settings – globalgamemanagers and globalgamemanagers.assets fil ...
- oracle 收集的一些图
================================================ ================================================ da ...
- blktrace分析IO
http://bean-li.github.io/blktrace-to-report/ 前言 上篇博客介绍了iostat的一些输出,这篇介绍blktrace这个神器.上一节介绍iostat的时候,我 ...
- python入门第0篇 Windows下python的安装及pip安装和使用
知识内容: 1. python2和python3安装 2. pip安装及pip命令使用 注:安装python3就可以了,python2除非项目开发需要否则不用安装,目前学习python就使用pytho ...
- CNN入门笔记
在之前的学习中,没有认真了解卷积神经网络,由于一些原因需要使用CNN来做图像分类,开始学习了卷积神经网络,参考了一些资料并做了这份记录 为什么要用卷积神经网络 在图像处理中,往往把图像表示为像素的向量 ...
- 【Flutter】Flutter 一些常用库
Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战> | 中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...
- uva-331-枚举-交换的方案数
题意:冒泡排序,最小交换数的前提下有多少用方案把数组变成从小到大的顺序, 注意: 3 2 1 3的下表是1 2的是2 1的是3 交换 3 2,那么第一个交换数是1 最小交换数=逆序数的和 那么,只 ...
- OpenACC 异步计算
▶ 按照书上的例子,使用 async 导语实现主机与设备端的异步计算 ● 代码,非异步的代码只要将其中的 async 以及第 29 行删除即可 #include <stdio.h> #in ...
- openx _金额
1/work/openx/lib/max/Delivery/log.php MAX_Delivery_log_logAdImpression MAX_Delivery_log_logAdRequ ...