简洁 清晰弹出层讲解制作(图片点击放大)

时间:2021-07-03 09:08:20

分享原因:因为要做这个功能在网上找了好多,看的繁琐蛋疼,基于以上原因今天给大家分享个简洁 清晰 又好懂(易于学习)的功能。

我们先准备个弹出层

<!--弹出层-->
<div class="max" id="maxfixed">
<!--内容-->
<div id="maxadd"></div>
</div>

弹出层的样式是:根据自己需求来自定义。给大家分享个我自己的样式需求
/*公共弹出层*/
.max{
position: fixed; //固定
width: 100%; //全屏
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,.6); //背景为透明黑
display: none; //隐藏
z-index: 9; //让其显示在最顶层
}
#maxadd{ //弹出层内容区域
position: absolute; //定位
top: 20%; //距离顶部20%
left: 50%; //左右居中
width: 500px;
margin-left: -250px;
}

接下来要有个触发功能函数的东西:因为是举例子所以随便拿一句代码做个展示,自己网站的样式我就不瞎哔哔了
<div class="d1" onclick="max(this)"><img src="img/sycake4img1.jpg"/></div>

最后就是写功能函数:
function max(a) {                                    //直接使用this-->a
var maxadd = document.getElementById('maxadd'); //添加图片路径所在区域
var img1 = a.firstChild; //获取d1下的第一个节点的元素
var imglj = img1.src; //获取到图片的:图片路径
if ($("#maxfixed").css("display") == "none") { //判断弹出层是隐藏状态,就显示它
/*显示*/
$("#maxfixed").show();
}
var img2 = "<img src = " + imglj + " />"; //将刚才获取到的图片路径给到一个新创建的变量img2
$("#maxadd").html(img2); //将创建的元素img2填充到弹出层的内容区域

/*点击关闭*/
$("#maxfixed").click(function() { //给弹出层一个点击事件使其关闭弹出层
if ($("#maxfixed").css("display") == "block") {
$("#maxfixed").hide();
}
});
}
好了  这样就完成了  

简洁 清晰弹出层讲解制作(图片点击放大)

就是这么简单



简洁 清晰弹出层讲解制作(图片点击放大)