原生js点击图片触发弹窗
页面显示模糊的小图片(small_X.jpg)，点击全屏显示高清大图片(large_X.jpg)
可实现放大、缩小、拖拽、旋转、上一张、下一张
以下为demo相关页面展示:
1.加载模糊的小图(demo2.html)
2.点击显示高清大图
3.放大或缩小图片(鼠标滚轮操作)
4.点击旋转按钮旋转图片(每次正向90度旋转)
5.点击查看上一张
6.点击图片拖动可以移动图片位置
demo2.html代码(仅供参考,需要加载css和js才能有效果)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>原生js图片相册</title><link rel="stylesheet" href="css/demo2.css" /><script type="text/javascript" src="js/demo2.js"></script></head><body><!-- 点击图片触发弹窗:当前页面显示模糊的小图片(small_X.jpg)点击全屏显示高清大图片(large_X.jpg)--><div class="div2Center"><a href="#"><img id="myImg1" onclick="jsImgView(0)" src="images/small_1.jpg" alt="小图片" class="smallImageWH"></a><a href="#"><img id="myImg2" onclick="jsImgView(1)" src="images/small_2.jpg" alt="小图片" class="smallImageWH"></a><a href="#"><img id="myImg3" onclick="jsImgView(2)" src="images/small_3.jpg" alt="小图片" class="smallImageWH"></a></div><div id="imageModal"></div></body><script type="text/javascript">var urlArray = ["images/large_1.jpg","images/large_2.jpg","images/large_3.jpg"];function jsImgView(id) {imgOptions = {dataArray: urlArray,currentUrl: urlArray[id]}JsImageGallery("imageModal");}</script></html>
完整demo下载地址功能强大漂亮的js图片相册,点击小图显示大图-Javascript文档类资源-CSDN下载js点击图片触发弹窗,页面显示模糊的小图片(small_X.jpg)，点击全屏显示高清大图片(lar更多下载资源、学习资料请访问CSDN下载频道./download/tianbbs/43003172
注:如上面连接不能打开，说明附件还在审核中，请过一段时间再下载
附件包含文件:
如果觉得《功能强大漂亮的js图片相册 js点击小图显示大图》对你有帮助，请点赞、收藏，并留下你的观点哦！
