所属分类:网页特效-图片特效,悬浮层/弹出层
使用方法:(主要介绍jQuery版本)
引入CSS样式文件
<link rel="stylesheet" href="css/viewer.min.css">
引入jQuery库文件、插件JS文件、插件初始化配置
<script src="js/jquery.min.js"></script>
<script src="js/viewer-jquery.min.js"></script>
<script>
$(function() {
$('#sucainiu').viewer({
url: 'data-original',
});
});
</script>
HTML结构
<ul id="sucainiu">
<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>