使用jquery+bootstrap搭建一个可以在表格内以分页形式显示的图片列表点击弹出大图弹出层显示大图点击小图显示大图

最新推荐文章于 2026-06-14 15:35:10 发布

原创最新推荐文章于 2026-06-14 15:35:10 发布 · 724 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js #html #css

javaWeb 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何在HTML表格中使用jQuery和Bootstrap实现图片分页展示，点击小图弹出大图的功能。通过解析路径，动态生成分页导航并绑定点击事件，实现了点击表格内的图片后，在弹出层显示大图，点击其他区域则关闭大图的效果。

昨天在完善自己写的小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){  
	
   // var src = _this.attr("path");//获取当前点击的pimg元素中的src属性
    
    
    $(bigimg).attr("src", "/upload/"+src);//设置#bigimg元素的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});//设置#innerdiv的top和left属性  
        $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg  
    });  
 
    $(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);
	});
	
	
	//ul加入到nav中
	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进行显示

如果这篇文章又帮助到你的话，就…一分也是爱～
在这里插入图片描述