HTML页面引入jQuery
首先图片添加点击事件 fun(this)

新建容器盛放放大的图片，及隐藏方法

<div class="filterPop" onclick="toHide()"></div>
<div class="setPops">
    <img src="" alt="" width="100%" height="100%">
</div>

添加样式

.setPops{width: 70%;

    position: absolute;
    left:15%;
    top:50%;
    z-index: 10;
    overflow: hidden;
    display: none;
}
.filterPop{
    background: rgba(0,0,0,.5);
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    z-index: 9;
    overflow: hidden;
    display: none;
}

Js代码

function fun(obj){
    var setPopsWidth=$(".setPops").width();
    $(".setPops, .filterPop").fadeIn();
    $(".setPops").css({height:setPopsWidth,marginTop:-setPopsWidth/2+"px"});
    $(".setPops").children("img")[0].src=obj.src;
}
function toHide() {
    $(".setPops, .filterPop").fadeOut()
}

全部代碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		  <script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
    
	
</head>

 <style type="text/css">
   .setPops{width: 70%;
    position: absolute;
    left:15%;
    top:50%;
    z-index: 10;
    overflow: hidden;
    display: none;
}
.filterPop{
    background: rgba(0,0,0,.5);
    position: absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:100%;
    z-index: 9;
    overflow: hidden;
    display: none;
}

 </style>
	
<body>

<img onclick="fun(this)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537184591216&di=daf7a95d81167fa7a8f9171337d7a98e&imgtype=0&src=http%3A%2F%2Fy3.ifengimg.com%2F0d3a610812c92903%2F2013%2F1205%2Fori_529fc836581d6.jpeg" alt="" width="50%" height="50%"> 
<div class="filterPop" onclick="toHide()"></div>
<div class="setPops">
    <img src="" alt="" width="100%" height="100%">
</div>



<!-- 引用页面js -->
<script type="application/javascript">
function fun(obj){
    var setPopsWidth=$(".setPops").width();
    $(".setPops, .filterPop").fadeIn();
    $(".setPops").css({height:setPopsWidth,marginTop:-setPopsWidth/2+"px"});
    $(".setPops").children("img")[0].src=obj.src;
}
function toHide() {
    $(".setPops, .filterPop").fadeOut()
}

</script>
</body>


</html>

图片效果如下：
这里写图片描述

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生