viewer.js插件简单使用说明

不需要依赖jQuery.js，只需要导入viewer.js和viewer.css文件即可。

插件GitHub地址：https://github.com/fengyuanchen/viewerjs


示例代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果</title>
        <link rel="stylesheet" href="css/viewer.min.css">
        <style>
            * { margin: 0; padding: 0;}

            #sucaihuo { width: 700px; margin: 0 auto; font-size: 0;}
            #sucaihuo li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
            #sucaihuo li img { width: 100%;}

            #sucaihuo2 { width: 700px; margin: 0 auto; font-size: 0;}
            #sucaihuo2 li { display: inline-block; width: 32%; margin-left: 1%; padding-top: 1%;}
            #sucaihuo2 li img { width: 100%;}
        </style>
    </head>

    <body>
        <h1>默认效果</h1>
        <h3>图片异源</h3>
        <!-- 展示和弹出图片源异源 -->
        <ul id="sucaihuo">
            <li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="图片1"></li>
            <li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="图片2"></li>
            <li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="图片3"></li>
            <li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="图片4"></li>
            <li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="图片5"></li>
            <li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="图片6"></li>
        </ul>
        <br/><br/><br/>
        <h3>图片同源</h3>
        <!-- 展示和弹出图片源同源 -->
        <ul id="sucaihuo2">
            <li><img src="img/tibet-1.jpg" alt="图片1"></li>
            <li><img src="img/tibet-2.jpg" alt="图片2"></li>
            <li><img src="img/tibet-3.jpg" alt="图片3"></li>
            <li><img src="img/tibet-4.jpg" alt="图片4"></li>
            <li><img src="img/tibet-5.jpg" alt="图片5"></li>
            <li><img src="img/tibet-6.jpg" alt="图片6"></li>
        </ul>

	</body>
	<script src="js/viewer.min.js"></script>
	<!-- 
	<script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script>
	-->
	<script>
		var viewer = new Viewer(document.getElementById('sucaihuo'), {
			url: 'data-original'
		});
        var viewer2 = new Viewer(document.getElementById('sucaihuo2'));
	</script>
</html>


posted on 2017-10-30 09:49  菜鸟Z  阅读(3157)  评论(0)  编辑  收藏  举报

导航