试写了一个用jquery 和css实现的图片遮罩

张文 · 发表于 2012-11-11 21:29

学与致用，学了些前端知识自己随便弄了下，和大家分享分享！

<!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=utf-8" />
<script src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
$(".aa").hover(function(){
$(this).children("div").fadeIn("slow");
},function(){
$(this).children("div").fadeOut("slow");
})
})
</script>
<title>无标题文档</title>
<style>
.aa:hover{display:block;}
</style>
</head>
<body>
<div style="width:950px;height:463px;outline:1px dashed #666;margin:0 auto;">
<div class="aa" style="width:228px;height:463px;float:left;position:relative;">
<img src="T1QiSDXmNAXXXXXXXX.jpg" />
<div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute; display:none;"></div>
</div>
<div style="float:left;width:700px;">
<div style="width:auto;">
<div class="aa" style="float:left;position:relative;" ><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
<div style="width:auto;">
<div class="aa" style="float:left;position:relative;"><img src="T1L5ODXdVBXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<div class="aa" style="float:left;position:relative;"><img src="T1lP1DXgdtXXXXXXXX.jpg" /><div style="width:100%;height:100%;top:0;left:0;background:rgba(96,96,96,0.5);position:absolute;display:none;"></div></div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
</div>
<p style="margin:0;padding:0;clear:both;"></p>
</div>
</body>
</html>

复制代码

http://bbs.itheima.com/forum.php?mod=attachment&aid=OTMxMnwyYTU5MjNlY2E3ODk0ZWY5MzRjMDNjZTkxZGE5MjljYXwxNzI2OTAwMzYw&request=yes&_f=.rar

穆爱明 · 穆爱明

再顶一下

穆爱明 · 穆爱明

学习一下，感谢分享！

许庭洲 · 许庭洲

值得学习ing!

帐号		自动登录	找回密码
密码			加入黑马

试写了一个用jquery 和css实现的图片遮罩

点评

评分

3 个回复

黑马骑士勋章