最新纯JS点击图片放大效果简单版+JQ弹窗放大版特效代码

作为一名网站开发者人员而言，网站特效是经常会用到，比如：点击图片实现放大效果，文字或多个图片不间断滚动/滑动效果等

今天就分享两款JS版本的点击图片放大效果的代码：

第一种：很简单的代码

点击图片预览效果

<img src=”https://cdn.goww.net/2022/11/1669689888-42976a691b30268.jpg” onclick=”this.width+=50;this.height+=50″ onclick=”javascript:window.open(this.src);” style=”cursor:pointer;”/>
<img src=”https://cdn.goww.net/2022/11/1669689888-42976a691b30268.jpg” onclick=”this.style.zoom=’2′” onclick=”javascript:window.open(this.src);” style=”cursor:pointer;”/>

直接将代码放入html文件内浏览器打开就可以看到效果，这种的比较简单，效果也一般。

第二种JQ版本：

<div id=”outerdiv” style=”position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;”>
<div id=”innerdiv” style=”position:absolute;”><img id=”bigimg” style=”border:5px solid #fff;” src=”” /></div>
</div>

<ul id=”imglist”><div>点击图片查看放大效果</div>
<li><img src=”2.png” width=”200px” /></li>
</ul>
<script src=”jquery.min.js”></script>

以上两款JS图片放大效果都比较简单，小伙伴们可以根据自身的实际情况进行使用，如果你需要抓紧免费下载学习和研究吧！