最简单的使用图片点击放大插件viewer.js的使用方法
本篇文章，分享【最简单的使用图片点击放大插件viewer.js的使用方法】
摘要：由于本人的一个问题，在捣鼓图片的时候，发现，如果图片太小，导致看不清。然后就去网上找了很多插件，发现都不满意，最后发现了viewer.js丨确实，这个插件很强大，也很合我意，因为这个插件有个特点就是，响应，而且还可以放大。这正是我需要的！
发表viewer.js的使用教程的人有很多，但是对于一些半小白来说，他们想要的，是最简单快捷的。
所以我就发一篇教程吧。
话不多少啦，先看效果图，加载略慢。
开始教程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewer.js的使用教程-标准开头</title>
<!-- 引用css样式 -->
<link rel="stylesheet" type="text/css" href="css/viewer.min.css"/>
<!-- 先引用JQ -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- 接着顺序要正确，继续引用 -->
<script src="js/viewer.min.js"></script>
<script src="js/jquery-viewer.min.js"></script>
</head>
<body>
<div>
<img src="img/55.jpg" alt="听风博客viewer.js教程">
<div>
</body>
</html>
然后接着往下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>viewer.js的使用教程-标准开头</title>
<!-- 引用css样式 -->
<link rel="stylesheet" type="text/css" href="css/viewer.min.css"/>
<!-- 先引用JQ -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- 接着顺序要正确，继续引用 -->
<script src="js/viewer.min.js"></script>
<script src="js/jquery-viewer.min.js"></script>
</head>
<body>
<div id="viewer_img">
<img src="img/55.jpg" alt="听风博客">
<img src="img/55.jpg" alt="听风博客">
<img src="img/55.jpg" alt="听风博客">
</div>
<!--
在底部添加让插件启用 false表示关闭，true表示开启
详解：$('#viewer_img')就是你要放大图片的父级，你可以套个div，然后id或者class都可以，懂JQ的都懂。
-->
<script type="text/javascript">
$(document).ready(function () {
$('#viewer_img').viewer({
navbar: false,
button: true,
toolbar: false,
title: false
});
});
</script>
</body>
</html>demo（演示文档）下载
[button color="info" icon="" url="https://lanzoui.com/i7q51xc" type=""]DOME文档【密码:i5tn】[/button]
声明：本站原创文章文字版权归本站所有，转载务必注明作者和出处；本站转载文章仅仅代表原作者观点，不代表本站立场，图文版权归原作者所有。如有侵权，请联系我们删除。