html表格中图片放大控件示例

抛出控件网址：Viewer.js (fengyuanchen.github.io)https://fengyuanchen.github.io/viewerjs/github地址：fengyuanchen/viewerjs: JavaScript image viewer. (github.com)https://github.com/fengyuanchen/viewerjs本地示例：<!

爱的叹息

537人浏览 · 2022-05-20 16:17:53

爱的叹息 · 2022-05-20 16:17:53 发布

抛出控件网址：

Viewer.js (fengyuanchen.github.io)https://fengyuanchen.github.io/viewerjs/

github地址：

fengyuanchen/viewerjs: JavaScript image viewer. (github.com)https://github.com/fengyuanchen/viewerjs

本地示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="Viewer/main.css" rel="stylesheet"/>
    <link href="Viewer/viewer.css" rel="stylesheet"/>
    <script src="Viewer/jquery.min.js"></script>
    <script src="Viewer/viewer.js"></script>
    <script src="Viewer/main.js"></script>
</head>
<body>
<div  hidden="true">
          <span  class="docs-pictures">
<!--            <img id ="VivwPiuter" class="img-xs" data-original="" src="" >-->
            <img id ="imageView"  data-original="../ui/img/blue_remove.png" src="../ui/img/blue_remove.png"  style="height: 500px;width: 700px;">

          </span>
</div>

<center><img style="width: 30px;height: 30px" class="img-xs"  data-height="30px;" data-width="30px;" data-target="self" src="https://alifei04.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg" onclick="image('https://alifei04.cfp.cn/creative/vcg/800/version23/VCG41175510742.jpg')"/></center>
</body>
<script>
    function image(arr){
        var VivwPiuter=document.getElementById("imageView");
        VivwPiuter.setAttribute("data-original",arr)
        VivwPiuter.src=arr;
        $("#imageView").click();
    }
</script>
</html>