【菜鸟手打js】@弹出遮罩层显示大图之一

来源：互联网发布：红米note内存优化级别编辑：程序博客网时间：2024/04/28 20:23

需求：页面上有图片列表，排列显示产品小图片，希望点击时像QQ空间查看相片一样出一个遮罩层，显示大图出来。

分析：

1.需要一个小图点击事件，触发遮罩层的显示。

2.遮罩层默认隐藏，用绝对定位，完全挡住页面可视区域就行。

3.把所有产品图片链接作为一个数组参数传入遮罩层，遮罩层根据链接显示对应大图。

4.遮罩层上图片切换的向左，向右两个按钮。还有一个关闭遮罩层按钮。

开工：引入jquery比较方便操作dom

1.先弄个图片列表，随便调整下。

2.加遮罩层，调整下样式。

3.加列表上的点击事件，和遮罩层的关闭事件。

4.遮罩层上的图片路径替换。

上代码

----------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<title>遮罩层大图</title>
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//小图点击事件
$(".piclist").on("click",function(){
$(".cur_big_pic").attr("src",$(this).attr("src"));
$(".top_level").show();
});
//关闭遮罩层
$(".close_top").on("click",function(){
$(".top_level").hide();
});

});
</script>
<style>
/*小图start*/
ul{
list-style: none;
}
ul li{
padding:5px;
float:left;
}
.piclist{
width:200px;
height:400px;
cursor:pointer;
}
/*小图end*/
/*大图start*/
.top_level{
display:none;
position:absolute;
width:100%;
height:100%;
background:#000000;
overflow:hidden;
}
.close_top{
padding:20px;
cursor:pointer;
color:#ffffff;
background:#00ff00;
}
/*大图end*/
</style>
</head>
<body>
<div>
<ul>
<li><img class="piclist" src="images/pic1.jpg"/></li>
<li><img class="piclist" src="images/pic2.jpg"/></li>
<li><img class="piclist" src="images/pic3.jpg"/></li>
<li><img class="piclist" src="images/pic4.jpg"/></li>
</ul>
</div>
<div class="top_level">
<div><span class="close_top">X</span></div>
<div><img class="cur_big_pic" src="images/error.jpg"></div>
</div>
</body>
</html>

------------------------------------

效果图

--------------------------------

点击前

点击后

--------------------------------

基本的框架起来了，接下来就要加左右切换。下次整

0 0