编程 Javascript

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>

效果图如下：

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

前端程序员必须知道的高性能Javascript知识

Aug 24 Javascript

浅谈jQuery添加的HTML,JS失效的问题

Oct 05 Javascript

正则表达式替换html元素属性的方法

Nov 26 Javascript

JS声明式函数与赋值式函数实例分析

Dec 13 Javascript

JS实现间歇滚动的运动效果实例

Dec 22 Javascript

微信小程序（六）：列表上拉加载下拉刷新示例

Jan 13 Javascript

Spring shiro + bootstrap + jquery.validate 实现登录、注册功能

Jun 02 jQuery

Angular4实现鼠标悬停3d倾斜效果

Oct 25 Javascript

JavaScript实现为事件句柄绑定监听函数的方法分析

Nov 14 Javascript

Vue实现按钮级权限方案

Nov 21 Javascript

vue使用screenfull插件实现全屏功能

Sep 17 Javascript

详解Vue的列表渲染

Nov 20 Vue.js

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