Tips:虽然代码有点长，但是你只需要改掉一个图片链接再下载个jQuery.html" title=js>js就可以得到要展示的效果。
话不多说，先上效果图
点击图片之后会将图片放大1.5倍放大，背景遮罩层根据情况进行设置
今晚找了很多博客都讲不清楚，所以自己就动脑子想想怎么做吧。。。
然后，根据之前设置弹出框的思想，搞出这个图片的放大效果，也挺有成就感，但是代码还是太Low，需要系统学一下呀。。。
思路：
1.设置遮罩层div，遮罩层根据body和clientHeight取大值进行设置；
2.设置弹出框div，添加img标签；
3.获取图片的链接、高度、宽度等性质；
4.向弹出框中添加src链接并设置图片属性，显示完毕。
上代码，这里加入了jQuery：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/html" title=javascript>javascript" src="jquery-3.4.1.html" title=js>js"></script>
</head>
<style type="text/html" title=css>css">
ul li{
list-style: none;
}
#container{
overflow: hidden;
}
#container img{
transition: all 0.8s;
}
#container img:hover{
transform: scale(1.03);
}
#layer{
display: none;
background-color: #B3B3B3;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
-moz-opacity: 0.8;
opacity:.80;
}
#popBox{
display: none;
z-index: 11;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
</style>
<script type="text/html" title=javascript>javascript">
// $(function () {
// $('.bigImg').click(function () {
//
// })
// })
function BigBig(src, width, height) {
//获取body高度和宽度，当然是包括下拉框在内的长度
var bkgWidth = document.body.clientWidth +'px';
var bkgHeight = document.body.clientHeight + 'px';
//获取可见高度
var clientHeight = document.documentElement.clientHeight;
if(clientHeight > document.body.clientHeight){
bkgHeight = clientHeight + 'px';
}else{
bkgHeight = document.body.clientHeight + 'px';
}
var layer = document.getElementById('layer');
$('#layer').html" title=css>css({"width":bkgWidth, "height":bkgHeight});
var popBox = document.getElementById('popBox');
var BigImage = document.getElementById('BigImage');
layer.style.display = 'block';
popBox.style.display = 'block';
// var src = $('#Image1').attr("src")
console.log(src)
// var realwidth = $('#Image1').width();
// var realheight = $('#Image1').height();
var realwidth = width;
var realheight = height;
// console.log(realwidth)
// console.log(realheight)
// console.log(width)
// console.log(height)
var bigWidth = realwidth*1.5;
var bigHeight = realheight*1.5;
$('#BigImage').html" title=css>css({"width":bigWidth, "height":bigHeight})
$('#BigImage').attr("src", src)
var leftwidth = (document.body.clientWidth - realwidth*1.5)/2;
var topheight = (clientHeight - realheight*1.5)/2
BigImage.style.marginTop = topheight - 10 + 'px';
BigImage.style.marginLeft = leftwidth + 'px';
// console.log(bigWidth)
// console.log(bigHeight)
}
function Close(){
var layer = document.getElementById('layer');
var popBox = document.getElementById('popBox');
layer.style.display = 'none';
popBox.style.display = 'none';
}
</script>
<body>
<div id="layer">
</div>
<div id="popBox">
<div>
<a onclick="Close();" style="cursor: pointer;color: #2D2C3B;">关闭</a>
</div>
<img id="BigImage" src="" style="">
</div>
<div id="container">
<img onclick="BigBig(this.src, this.width, this.height);" style="margin-left: 100px;width: 40%;" src="Image/1001181.jpg">
</div>
</body>
</html>
还是有点成就感的，，，，
多多点赞呀！！！！
