js图片查看器
首先 在github上下载 js，css点击打开链接html>html lang="en">head>meta charset="UTF-8">title>Titletitle>link rel="stylesheet" href="../css/viewer.min.css">script src="../lib/jquery.min.js">
·
首先 在github上下载 js，css点击打开链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/viewer.min.css">
<script src="../lib/jquery.min.js"></script>
<script src="../lib/viewer.min.js"></script>
</head>
<body>
<div id="viewer" class="viewer">
<div><img src="images/thumbnails/tibet-1.jpg" data-original="images/tibet-1.jpg" alt="图片1"></div>
<div><img src="images/thumbnails/tibet-2.jpg" data-original="images/tibet-2.jpg" alt="图片2"></div>
<div><img src="images/thumbnails/tibet-3.jpg" data-original="images/tibet-3.jpg" alt="图片3"></div>
<div><img src="images/thumbnails/tibet-4.jpg" data-original="images/tibet-4.jpg" alt="图片4"></div>
<div><img src="images/thumbnails/tibet-5.jpg" data-original="images/tibet-5.jpg" alt="图片5"></div>
<div><img src="images/thumbnails/tibet-6.jpg" data-original="images/tibet-6.jpg" alt="图片6"></div>
</div>
<script>
$('.viewer').viewer();
// $('.viewer').viewer({url:"data-original",});}
</script>
</body>
</html>
查看效果如下所示：
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)