昨天在完善自己写的小demo的时候遇到一个需求，我需要在表格内其中的一列显示多张图片，对前端经验很少的我开始犯难，后来找了几篇大佬的博客，自己琢磨了一会，捣鼓出了一个还算可以的显示方式
可以完成的一些功能 1.点击后弹出层显示 2.自动绑定点击事件，绑定显示图片路径 3.点击其余部位消失
先看下html的代码
<body>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;" class="">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
<div class="row">
<div class="col-md-8">
<table class="table table-hover">
<tr>
<th>序号
</th>
<th>qq昵称
</th>
<th>微信昵称
</th>
<th>手机号
</th>
<th>微信号
</th>
<th>qq号
</th>
<th>其他联系方式
</th>
<th>日期
</th>
<th>概述
</th>
<th>图片
</th>
</tr>
<tr>
<td>1
</td>
<td>AzH
</td>
<td>AzH
</td>
<td>19851557015
</td>
<td>chenhan-wu
</td>
<td>597262603
</td>
<td>null
</td>
<td>2020.02.08
</td>
<td>xxxxx
</td>
<td id="page_nav_area">
</td>
</tr>
</table>
</div>
</div>
</body>
简单思路介绍
outerdiv：用来显示指定图片 page_nav_area：使用jquery生成“分页条”形式的点击按钮
jquery层：
<script type
="text/javascript">
$(function(){
var path
="---...---1603203218494.jpeg---...---1603115901950.JPG---...---1603115902014.JPG---...---"
build_page_nav(path
)
});
function imgShow(outerdiv
, innerdiv
, bigimg
, src
){
$(bigimg
).attr("src", "/upload/"+src
);
$("<img/>").attr("src", "/upload/"+src
).on('load',function(){
var windowW
= $(window
).width();
var windowH
= $(window
).height();
var realWidth
= this.width
;
var realHeight
= this.height
;
var imgWidth
, imgHeight
;
var scale
= 0.8;
if(realHeight
>windowH
*scale
) {
imgHeight
= windowH
*scale
;
imgWidth
= imgHeight
/realHeight
*realWidth
;
if(imgWidth
>windowW
*scale
) {
imgWidth
= windowW
*scale
;
}
} else if(realWidth
>windowW
*scale
) {
imgWidth
= windowW
*scale
;
imgHeight
= imgWidth
/realWidth
*realHeight
;
} else {
imgWidth
= realWidth
;
imgHeight
= realHeight
;
}
$(bigimg
).css("width",imgWidth
);
var w
= (windowW
-imgWidth
)/2;
var h
= (windowH
-imgHeight
)/2;
$(innerdiv
).css({"top":h
, "left":w
});
$(outerdiv
).fadeIn("fast");
});
$(outerdiv
).click(function(){
$(this).fadeOut("fast");
});
}
function build_page_nav(path
){
var path_arr_before
=path
.split('---...---');
var path_arr
=new Array();
console
.log(path_arr_before
);
$
.each(path_arr_before
,function(index
,item
){
if(item
!=""){
path_arr
.push(item
);
}
});
console
.log(path_arr
)
$("#page_nav_area").empty();
var ul
=$("<ul></ul>").addClass("pagination").addClass("pagination-sm");
$
.each(path_arr
,function(index
,item
){
var numLi
=$("<li></li>").append($("<a></a>").append(index
+1));
numLi
.click(function(){
imgShow("#outerdiv", "#innerdiv", "#bigimg", item
);
})
ul
.append(numLi
);
});
var navEle
=$("<nav></nav>").append(ul
);
console
.log(navEle
)
navEle
.appendTo("#page_nav_area");
};
</script
>
简单思路介绍：
1.path是用来存路径的一串字符，当然后期是要用ajax向后端拿数据的 2.页面加载完成后调用构建分页条的函数 3.当用来构建分页条的函数被调用并传入路径时，先会对这串字符进行分割后存入一个数据，后开始构建一个分页条用于插入“page_nav_area”便于点击，构建时除了会对1，2，3的显示进行设置，还会给其绑定点击事件，当点击时间触发，会调用imgShow函数，并传入对应的路径，由imgShow进行显示
如果这篇文章又帮助到你的话，就…一分也是爱～
