imgPreview/instructions at master · feeingHe/imgPreview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# imgPreview
JS/Javascript plugin for imgPreView.js
使用方法：
        1.在图片上加上class类‘img-view’;
        2.本插件基于jquery;
        3.在引入jquery后,引入imgView.min.js即可;
        4.本jsg=更适合移动端;

demo:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content = "width=device-width,  initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" /> -->
    <meta name="keywords" content="图片查看器plugin"/>
    <meta name="description" content=" 图片查看器plugin"/>
    <title>图片查看器 demo</title>
    <!-- imgPreView.js 是基于jquery开发的插件-->
    <script src="./jquery.min.js"></script>
        <style>
            *{margin:0 ;padding:0;}
            img{width:20%;}
        </style>
    </head>
    <body>
        <div>
            <img src="./images/im1.jpg" alt="" class="img-view">
            <img src="./images/im2.jpg" alt="" class="img-view">
            <img src="./images/im3.jpg" alt="" class="img-view">
            <img src="./images/img1.jpg" alt="" class="img-view">
            <img src="./images/img2.jpg" alt="" class="img-view">
            <img src="./images/img3.jpg" alt="" class="img-view">
        </div>
        <div>
            <img src="./images/img4.jpg" alt="" class="img-view">
            <img src="./images/img5.jpg" alt="" class="img-view">
            <img src="./images/img6.jpg" alt="" class="img-view">
        </div>

    <script src="./imgPreView.js?v=0.01" type="text/javascript" charset="utf-8"></script>
    </body>
    </html>