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

迷南。 2022-09-12 01:54 168阅读 0赞

**原生js点击图片触发弹窗**

**页面显示模糊的小图片(small\_X.jpg)，点击全屏显示高清大图片(large\_X.jpg)**

**可实现放大、缩小、拖拽、旋转、上一张、下一张**

以下为demo相关页面展示:

1.加载模糊的小图(demo2.html)

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16][]

2.点击显示高清大图

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_12_color_FFFFFF_t_70_g_se_x_16][]

3.放大或缩小图片(鼠标滚轮操作)

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_12_color_FFFFFF_t_70_g_se_x_16 1][]

4.点击旋转按钮旋转图片(每次正向90度旋转)

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 1][]

5.点击查看上一张

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 2][]

6.点击图片拖动可以移动图片位置

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 3][]

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>
    
    <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下载地址https://download.csdn.net/download/tianbbs2008/23532600  
注:此demo为付费资源,生活不易,且看且珍惜...

附件包含文件:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_15_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ca678480ade74283b337677d02594b3c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/491bb6a35fda4dfa9d0d7f73e371d103.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_12_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/ab9af76d71504b889a88dc551d63a48b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/426810bc45384c8b869dadccb79d55dd.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/86b61b4a7979479b8d9958e24d7ec138.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_13_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f13e90c4158b41839ac0d34035efebe5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54ix5Zad5ZKW5ZWh55qE56iL5bqP54y_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/f96f4b6e004e49fda3f8eb0bb22c5f43.png