鼠标经过的图片高亮显示，其余变暗效果[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文件,里面放置一张普通状态时的透明图片,一 ...
随机推荐
- windows基础应用（word）
自动编号-最后选择一下编号格式 TAB 进入子节 shift+TAB 回退到父节 取消邮箱/网址链接 ctrl+z word中输入不认识生僻字:输入偏旁部首王,选中插入中寻找 输入英文时,更改大小写/ ...
- Linux常用命令收藏
常见操作: 快速清空文件内容的几种方法:#: > filename # > filename # echo "" > filename # echo > f ...
- Spring 基础使用
1 id 和 name 的区别 id:不可重复,不可包含特殊字符 name:可以重复,可以包含特殊字符 2 scope singleton:配置单例模式(默认),在容器启动时创建对象,而且只创建一个 ...
- bravado哺乳内衣适合试穿体验，分享给需要买哺乳内衣的妈妈们。
看来看去还是觉得在美德乐天猫旗舰店(www.bravadobravado.com)购买最保险. 这款内衣穿起来非常舒服,感觉一点都不勒,而且面料也很透气,我生宝宝之前怀孕的时候穿80C,这个本来一开始 ...
- Spark JDBC入门测试
spark jdbc分支源码下载地址 https://github.com/apache/spark/tree/branch-1.0-jdbc 编译spark jdbc ./make-distrib ...
- 进行web开发时应该考虑的架构性因素
功能实现 这个自不必说. 性能与可伸缩性 根据预期的访问量,评估机器负载情况.如果在可预期的未来一台服务器可以撑得住,则没必要使用多台服务器.需要对多个环节进行性能评估:web服务器.逻辑服务器.DB ...
- Python数据分析_Pandas01_数据框的创建和选取
主要内容: 创建数据表 查看数据表 数据表索引.选取部分数据 通过标签选取.loc 多重索引选取 位置选取.iloc 布尔索引 Object Creation 新建数据 用list建series序列 ...
- 20165233 2017-2018-2 《Java程序设计》第八周学习总结
20165233 2017-2018-2 <Java程序设计>第八周学习总结 教材学习内容总结 基础:Java中的线程,Thread类与线程的创建 - 线程是比进程更小的单位. - JVM ...
- Redis安装及五种数据类型
redis是非关系型数据库,也叫内存数据库.数据是键值对的形式,通过key查找value 安装Radis:6379 sudo apt-get update sudo apt-get install r ...
- 初试mysql5.7.2新特性：多源复制（MySQL 5.7 multi-source replication）
多源复制和多主复制的区别: 多主复制示意图: 多源复制示意图: 在my.cnf中添加crash safe特性参数:master_info_repository=TABLE;relay_log_info ...