功能强大漂亮的js图片相册,js点击小图显示大图

最新推荐文章于 2024-08-21 23:57:05 发布

爱喝咖啡的程序猿

最新推荐文章于 2024-08-21 23:57:05 发布

阅读量1.6k

点赞数

分类专栏：前端web开发文章标签： html javascript css

本文链接：https://blog.csdn.net/tianbbs2008/article/details/120368349

版权

前端web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原生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下载频道.https://download.csdn.net/download/tianbbs2008/43003172
注:如上面连接不能打开，说明附件还在审核中，请过一段时间再下载