jQuery天猫商城图片变暗效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery天猫商城图片变暗效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为天猫商城图片变暗效果（jQuery)，属于站长常用代码" />
<title>天猫商城图片变暗效果（jQuery)</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
	$(function(){
		$(".floor-maskItem").mouseover(function(){
			$(this).addClass("qq").parent().addClass("hover");
		}).mouseout(function(){
			$(this).removeClass("qq").parent().removeClass("hover");
		});
	})
</script>
</head>
<body>
<!-- 代码开始 -->
<div class="area01">
	<div class="box01-tmall"><img src="images/bg01.jpg" /></div>
	<div class="box">
		<a href="#"  class="floor-maskItem" style="left:0;top:0;">
			<img src="images/img01.jpg" />
			<div class="mask"></div>
		</a>
		<a href="#"  class="floor-maskItem" style="left:195px;top:0;">
			<img src="images/img02.jpg" />
			<div class="mask" style="width:390px;"></div>
		</a>
		<a href="#"  class="floor-maskItem" style="left:0;top:150px;">
			<img src="images/img03.jpg" />
			<div class="mask"></div>
		</a>
		<a href="#"  class="floor-maskItem" style="left:195px;top:150px;">
			<img src="images/img04.jpg" />
			<div class="mask"></div>
		</a>
		<a href="#"  class="floor-maskItem" style="left:390px;top:150px;width:195px;">
			<img src="images/img05.jpg" />
			<div class="mask"></div>
		</a>
		<a href="#"  class="floor-maskItem" style="left:585px;top:0;height:300px;">
			<img src="images/img06.jpg" />
			<div class="mask" style="height:300px;"></div>
		</a>
	</div>
</div>
</body>
</html>

CSS代码(lrtk.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0}
ul,ol,li{list-style:none}
input,button{margin:0;font-size:12px;vertical-align:middle}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;background:url(../images/bg01.gif) repeat-x left top;text-align:center;margin:0 auto}
a{text-decoration:none}
img{display:block}
.area01{width:970px;margin:20px auto;height:300px;border-top:2px solid #000;overflow:hidden}
.box01-tmall{float:left;width:190px}
.box{width:780px;float:left;position:relative;height:300px}
.box a{float:left}
.floor-maskItem{position:absolute;float:left}
.floor-maskItem img{float:left}
.mask{position:absolute;left:0;top:0;background:#000;width:195px;height:150px;opacity:0;filter:alpha(opacity=0)}
.hover .mask{background:#000;opacity:0.5;filter:alpha(opacity=50);cursor:pointer}
.hover .qq .mask{opacity:0;filter:alpha(opacity=0)}

附件:下载该文件资源,减少时间成本(增值服务)