鼠标经过的图片高亮显示，其余变暗效果[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文件,里面放置一张普通状态时的透明图片,一 ...
随机推荐
- [UE4]把枪抽象为一个类
- Javascript框架
网易开源框架http://www.oschina.net/p/nej http://www.linuxeden.com/html/develop/20120716/127404.html 16 款最流 ...
- skopt超参数优化实例
import numpy as np import matplotlib.pyplot as plt from sklearn.datasets import load_boston from skl ...
- CSS属性 table 的 border-collapse 边框合并
说明 该CSS属性用来设定表格的行和列的边框是合并成单边框,还是分别有各自的边框 separate 缺省值.边框分开,不合并.collapse 边框合并.即如果相邻,则共用同一个边框. 虽然在DIV+ ...
- CSS 背景background实例
css背景background用于设置html标签元素的背景颜色.背景图片已经其他背景属性.本文章向码农介绍CSS 背景background使用方法和基本的使用实例.需要的码农可以参考一下. 一.Cs ...
- 利用Win10计划任务 + 弹窗，提醒你自己
博主公司周报漏交一次要缴纳50RMB部门经费,另外博主每天上午下午都需要活动10分钟(好像放风..),防止职业病 + 让自己的工作状态更好. 步骤: 1.打开Win10控制面板 —> 点选管理工 ...
- Python入门一：简单得不能再简单了##
从python的语法上看,简单得不能再简单了. 想学它,请移步廖雪峰python2.7教程以及python3.这实在是最好的入门教程.参考资料太多: 外国的教程 Python 入门指南 Python ...
- uva-10047
我们考虑一个特殊情况,一个独轮车是一个圆环,独轮车靠这个圆环运动,这个圆环上涂有五个不同的颜色,如下图每个颜色段的圆心角是72度,这个圆环在MxN个方格的棋盘上运动,独轮车从棋盘中一个格子的中心点开始 ...
- windows2012任务计划不执行
1.Windows Server 2008 计划任务在哪里配置? 2.Windows Server 2008 可以配置每分钟或是每小时执行我的任务吗? 答案是:可以! 首先Windows Server ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...