实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html lang="zh-Hans">
3
    <head>
4
        <meta charset="utf-8">
5
        <title>viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果</title>
6
        <link rel="stylesheet" href="/api/jq/5733e37375c75/css/viewer.min.css">
7
        <style>
8
            * { margin: 0; padding: 0;}
9
            #sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}
10
            #sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
11
            #sucaihuo li img { width: 100%;}
12
        </style>
13
    </head>
14
​
15
    <body>
16
        <h1>默认效果</h1>
17
​
18
        <ul id="sucaihuo">
19
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-1.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-1.jpg" alt="图片1"></li>
20
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-2.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-2.jpg" alt="图片2"></li>
21
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-3.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-3.jpg" alt="图片3"></li>
22
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-4.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-4.jpg" alt="图片4"></li>
23
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-5.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-5.jpg" alt="图片5"></li>
24
            <li><img data-original="/api/jq/5733e37375c75/img/tibet-6.jpg" src="/api/jq/5733e37375c75/img/thumbnails/tibet-6.jpg" alt="图片6"></li>
25
        </ul>
26
        <script src="/api/jq/5733e37375c75/js/viewer.min.js"></script>
27
        <script>
28
            var viewer = new Viewer(document.getElementById('sucaihuo'), {
29
                url: 'data-original'
30
            });
31
        </script>
32
    </body>
33
</html>