鼠标经过的图片高亮显示，其余变暗效果[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 logging 日志模块的配置和使用
import logging logging.basicConfig(level=logging.DEBUG, format='%(asctime)s %(filename)s[line:%(line ...
- s3express截图安装教程
1.安装s3express_setup.exe 2.设置s3express 设置服务器地址setopt -endpoint:s3.cn-north-1.amazonaws.com.cn 设置协议set ...
- Spring MVC springMVC-servlet.xml
DispatcherServlet的配置: DispatcherServlet是SpringMVC的前端控制器,所有的请求都经过前端控制器,也是项目中出现的唯一一个servlet,在 web.xml中 ...
- 使用promisify来流程化异步操作
现代js包括nodejs中有很多函数都是异步执行的, 我们总是需要写一个回调函数并且作为最后以一个参数传入,而我希望的是能像写promise这样的回调 promise .then() .then() ...
- url 路由系统
Django的路由系统 URL配置(URLconf)就像Django所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表. 我们就是以这种方式告诉Django,遇到哪个URL的时 ...
- Web 跨域请求(OCRS) 前端解决方案
1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...
- Python自定义状态码枚举类
在Java里很容易做到自定义有状态码和状态说明的枚举类例如: public enum MyStatus { NOT_FOUND(404, "Required resource is not ...
- 发送短信验证码及调用短信接口与C# 后台 post 发送
#region 调用短信接口 public ActionResult Mobile(string Tel)//调用接口 { Random rm = new Random(); int i; strin ...
- C++官方文档-静态成员
#include <iostream> using namespace std; class Dummy { public: static int n; int x; Dummy() : ...
- rhel7配置tiger vnc详解 centos6配置安装vnc-server
参考网站:http://blog.51cto.com/xjsunjie/1963463 结合 https://blog.csdn.net/wamath/article/details/760 ...