jQuery实现鼠标滑过遮罩并高亮显示效果


Posted in Javascript onJuly 16, 2013
<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>鼠标滑过遮罩高亮效果</title> 
<style> 
*{padding:0;margin:0;} 
ul,li{list-style:none;} 
.picshow{float:left;padding:4px 0;width:760px;position:relative;} 
.picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000;opacity:0.9;} 
.picshow li img{height:160px;width:190px;} 
.picshow li a{display:block;} 
</style> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function() { 
var conAry = $("[name=h_light]"); 
conAry.each(function(){ 
var $this = $(this); 
var els = $("a", $this); 
els.each(function(){ 
var el = $(this); 
el.mouseover(function() { 
els.css({ "opacity": 0.6}); 
el.animate({ "opacity": 0.9 }); 
}); 
}); 
$this.mouseout(function() { 
els.css("opacity", 1); 
}); 
}); 
}); 
</script> 
</head> 
<body> <ul class="picshow" name="h_light"> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
<li><a href="http://www.875.cn/" target="_blank" ><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" ></a></li> 
</ul> 
</body> 
</html>

效果图如下:
jQuery实现鼠标滑过遮罩并高亮显示效果
Javascript 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
编写简单的jQuery提示插件
Dec 21 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
js实现select二级联动下拉菜单
Apr 17 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 #Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 #Javascript
js判断屏幕分辨率的代码
Jul 16 #Javascript
js 调用父窗口的具体实现代码
Jul 15 #Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 #Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 #Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 #Javascript
You might like
PHP中实现图片的锐化
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
php 删除cookie方法详解
2014/12/01 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
JS 显示当前日期与时间的代码
2010/03/24 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
js实现无缝轮播图特效
2020/05/09 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python线程的几种创建方式详解
2019/08/29 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
eHarmony英国:全球领先的认真恋爱约会平台之一
2020/11/16 全球购物
《槐乡五月》教学反思
2014/04/25 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB