本篇文章,分享【最简单的使用图片点击放大插件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]
说说你的见解