您的位置：首页 > Web前端 > JavaScript

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

2016-03-17 01:28 585 查看

需求：页面上有图片列表，排列显示产品小图片，希望点击时像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>

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

效果图

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

点击前

点击后

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航