viewer.js插件简单使用说明

最新推荐文章于 2024-04-26 11:39:11 发布

敲键盘的猫

最新推荐文章于 2024-04-26 11:39:11 发布

阅读量2.3w

点赞数

分类专栏：插件使用文章标签： viewer.js 图片弹出层 360度旋转放大缩小

本文链接：https://blog.csdn.net/archer119/article/details/78390203

版权

插件使用专栏收录该内容

14 篇文章 0 订阅

订阅专栏

不需要依赖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>

敲键盘的猫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
viewer.js插件简单使用说明

不需要依赖jQuery.js，只需要导入viewer.js和viewer.css文件即可。插件GitHub地址：https://github.com/fengyuanchen/viewerjs示例代码如下： viewer.js强大的响应式图片弹出层(360度旋转、放大缩小)演示-默认效果
复制链接

扫一扫