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 数组循环引起的思考
Jan 01 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
vue单页缓存方案分析及实现
Sep 25 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
PHP大转盘中奖概率算法实例
2014/10/21 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
Vue中正确使用jQuery的方法
2017/10/30 jQuery
js中DOM事件绑定分析
2018/03/18 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中datetime模块参考手册
2017/01/13 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
python3正则模块re的使用方法详解
2020/02/11 Python
谈谈对css属性box-sizing的了解
2017/01/04 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
普通大学毕业生自荐信
2013/11/04 职场文书
阿德的梦教学反思
2014/02/06 职场文书
就职演讲稿范文
2014/05/19 职场文书
开工典礼策划方案
2014/05/23 职场文书
学校周年庆活动方案
2014/08/22 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
老公保证书怎么写
2015/02/26 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技