网页中的图片查看器viewjs使用方法
2019/6/27 20:49:44
本文主要是介绍网页中的图片查看器viewjs使用方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
需求分析:
对于网页中的图片进行连续放大(便于用户清晰查看内容)、缩小,旋转等操作,可以使用viewjs图片查看器插件实现。
viewjs官方网址:https://github.com/fengyuanchen/viewerjs
具体使用方法请参照官网说明。
下面做2个简单的示例:
1、示例一:单一图片
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网页中的图片查看器viewjs使用</title> <!--请配置好css路径--> <link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" rel="external nofollow" rel="external nofollow" /> <style type="text/css"> * { margin: 0; padding: 0; } img{ border: 1px solid #009F95; } </style> </head> <body> <div> <img id="image" src="img/sj.jpg" alt="Picture"> </div> <!--请配置好js路径--> <script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var viewer = new Viewer(document.getElementById('image')); </script> </body> </html>
效果:
(1)网页显示:
(2)点击图片后:
2、示例二:多个图片同时展示
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网页中的图片查看器viewjs使用</title> <!--请配置好css路径--> <link rel="stylesheet" type="text/css" href="viewjs/viewer.min.css" rel="external nofollow" rel="external nofollow" /> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 1px solid #009F95; } </style> </head> <body> <div> <!--可以对图片样式进行控制--> <ul id="images"> <li><img src="img/aaa.jpg" alt="Picture"></li> <li><img src="img/product4.jpg" alt="Picture 2"></li> <li><img src="img/sqbg-icon.jpg" alt="Picture 3"></li> </ul> </div> <!--请配置好js路径--> <script src="viewjs/viewer.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var viewer = new Viewer(document.getElementById('images')); </script> </body> </html>
(1)网页展示效果(未对图片进行样式控制,页面丑。)
(2)点击任何一个图片,可对图片进行各种查看操作。
总结:viewjs插件可以对网页中的图片进行各种查看操作,尤其可以用于用户想连续方法查看图片等情景。其他viewjs的方法后续会
以上这篇网页中的图片查看器viewjs使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于网页中的图片查看器viewjs使用方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-21Vue3教程:新手入门与实战指南
- 2024-09-21VueRouter4教程:入门与实践指南
- 2024-09-21Vuex4项目实战:新手入门教程
- 2024-09-21Vue3项目实战:初学者指南
- 2024-09-21Vue3项目实战:从零开始构建你的第一个Vue3应用
- 2024-09-21VueRouter4项目实战入门教程
- 2024-09-21Vue3入门:新手必读指南
- 2024-09-20Vue3教程:初学者快速入门指南
- 2024-09-20Vue资料入门教程:从零开始学习Vue.js
- 2024-09-20Vuex4入门教程:轻松掌握Vue状态管理