表单页面图片点击放大

最新推荐文章于 2024-06-07 13:51:40 发布

大画家DHJ

最新推荐文章于 2024-06-07 13:51:40 发布

阅读量382

点赞数 1

分类专栏：前端文章标签： datatable 表单图片放大点击 js

本文链接：https://blog.youkuaiyun.com/qq_41057885/article/details/118710016

版权

前端专栏收录该内容

13 篇文章

订阅专栏

前言

关于图片的放大，之前写过一篇文章（Viewer.js用法说明），感兴趣的可以去看一下。该篇仅使用ViewerJS插件演示了图片的放大，在本篇文章中，将使用 js 和 css 做出类似的效果。

一个简单的DataTable表单带图片的页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DataTable表单图片放大</title>
	<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
	<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="DataTables-1.10.21/media/css/jquery.dataTables.css">
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.js"></script>
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="dataTables" class="display">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>头像</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
            <td>小华</td>
            <td>男</td>
            <td><img src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" width="120px" height="120px" /></td>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td><img src="https://img0.baidu.com/it/u=1580501787,114076050&fm=26&fmt=auto&gp=0.jpg" width="120px" height="120px" /></td>
        </tr>
        <tr>
            <td>小红</td>
            <td>女</td>
            <td><img src="https://img1.baidu.com/it/u=2838780513,3053016818&fm=26&fmt=auto&gp=0.jpg" width="120px" height="120px" /></td>
        </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
	$(document).ready( function () {
	    $('#dataTables').DataTable();
	});
</script>
</html>

需求：点击头像能放大，再次点击能返回原样。

图片点击放大实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DataTable</title>
	<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
	<!-- DataTables CSS -->
	<link rel="stylesheet" type="text/css" href="DataTables-1.10.21/media/css/jquery.dataTables.css">
	<!-- jQuery -->
	<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.js"></script>
	<!-- DataTables -->
	<script type="text/javascript" charset="utf8" src="DataTables-1.10.21/media/js/jquery.dataTables.js"></script>
	<style type="text/css">
	    .fillbg {
	        background-color: rgba(0, 0, 0, 0.1);
	        bottom: 0;
	        height: 100%;
	        left: 0;
	        opacity: 0;
	        position: fixed;
	        right: 0;
	        top: 0;
	        width: 100%;
	        z-index: 100;
	        display: none;
	    }
	    .fillbg-active {
	        opacity: 1;
	        display: block;
	    }
	    .image {
			cursor: pointer;
	    }
	</style>
</head>
<body>
	<table id="dataTables" class="display">
	    <thead>
	        <tr>
	            <th>姓名</th>
	            <th>性别</th>
	            <th>头像</th>
	        </tr>
	    </thead>
	    <tbody>
	    	<tr>
	            <td>小华</td>
	            <td>男</td>
	            <td><img src="https://img0.baidu.com/it/u=3311900507,1448170316&fm=26&fmt=auto&gp=0.jpg" class="image" title="点击图片放大" width="120px" height="120px" /></td>
	        </tr>
	        <tr>
	            <td>小明</td>
	            <td>男</td>
	            <td><img src="https://img0.baidu.com/it/u=1580501787,114076050&fm=26&fmt=auto&gp=0.jpg" class="image" title="点击图片放大" width="120px" height="120px" /></td>
	        </tr>
	        <tr>
	            <td>小红</td>
	            <td>女</td>
	            <td><img src="https://img1.baidu.com/it/u=2838780513,3053016818&fm=26&fmt=auto&gp=0.jpg" class="image" title="点击图片放大" width="120px" height="120px" /></td>
	        </tr>
	    </tbody>
	</table>
	<div class="bg">
        <img src="" class="bgImg" style="max-width: 100%; max-height: 100%; position: fixed;" />
    </div>
</body>
<script type="text/javascript">
	$(document).ready( function () {
		//初始化datatable
	    $('#dataTables').DataTable({

	    });

	    // 图片点击放大
        $(document).on("click", ".image", function () {
            var imgSrc = $(this).attr("src");
            $("body").append('<div class="fillbg"></div>');
            $(".fillbg").addClass("fillbg-active");
            $('.bgImg').css({
                'width': '90%',
                'height': '90%',
                'top': '5%',
                'left': '5%',
                'z-index': 101,
                'cursor': 'pointer'
            });
            $('.bgImg').attr("title", "点击图片关闭");
            $('.bgImg').attr("src", imgSrc);
        });

        // 放大图片点击关闭
        $(".bgImg").bind("click", function () {
            $(".fill-input").removeClass("fill-input-active");
            setTimeout(function () {
                $(".fillbg-active").removeClass("fillbg-active");
                $(".fillbg").remove();
            }, 100);
            $('.bgImg').css({'width': '0px', 'height': '0px'});
            $('.bgImg').attr("src", '');
        });
	});
</script>
</html>