版权声明：本文为博主原创文章，未经博主允许不得转载。博客源地址为zhixiang.org.cn https://blog.csdn.net/myFirstCN/article/details/80859064
前几天网站测试的时候发现了博客中的图片的有的太小了看不清楚，随想到了使用一个图片放大的插件，不过度娘了好几分钟以后实在没有找到比较优雅的。然后就自己写了一个，在这里分享给大家。
对比我度娘的结果，此功能实现没有基于任何框架，原生js、css和html就可以实现,相信聪明的你看了就明白了。
因为我的网站不是博客么，当我的一篇博客从后台查询出来的时候，有一个字段会记录博客的正文。我们需要放大的图片就在这个正文里了。
首先我先调用了一个方法为我的正文做了一下转换：
imgHander(context) {
var subStr=new RegExp('<img','ig');
return context.replace(subStr, "<img onclick='picBig(this)' ");
}
我给正文中所有的img标签都添加了一个picBig函数,这个参数传递的是这个图片本身，那么这个函数又是怎么实现的呢？
function picBig(img) {
var i=img.currentSrc;
var v = document.getElementById('divCenter');
var bigImg = document.getElementById('bigImg');
bigImg.src=i;
v.style.display = "block";
}
大致上呢，这个函数获取了调用者的图片地址，然后给了一个id为bigImg的img标签，然后呢又把一个di为divCenter的东西给设置了display
为显示。那么这两个东西又是什么呢，接着忘下看：
<div id="divCenter" align="center"
style="position: absolute; display: none; width: 100%; height: 100%; overflow:auto; position:fixed;z-index:9999;margin-top: 30px;">
<img id="bigImg" class="bigImg" onclick="picClose();"
src="" style="width:90%;"/>
</div>
看到这里相信你已经明白了，这个div会显示出来，并且我们刚才点击的图片大小会变成宽度为90%，其实我们的图片放大功能已经实现了不是么。接着图片缩小，是不是very easy，隐藏这个div就是了，点击图片时调用picClose函数。
function picClose() {
var v = document.getElementById('divCenter');
v.style.display = "none";
}
功能已经完全实现了，如果你不着急走的话就在附送你两个小样式。
.blog img {
cursor:url(img/big.png),auto;
}
.bigImg {
cursor:url(img/small.png),auto;
}
上方两个样式呢，第一个是当我们鼠标放在需要放大的图片上时会显示一个放大镜，第二个就是图片放大以后鼠标放上就会显示一个缩小的样式，在这里顺便把这两个icon附上
。
