小程序页面设计工具_网页中的图片查看器viewjs使

摘要: 网页页面中的照片查询器viewjs应用方式 文章投稿:jingxian 下边网编就为大伙儿产生一篇网页页面中的照片查询器viewjs应用方式。网编感觉挺好的,如今就共享给大伙儿,也给大伙儿...

网页中的图片查看器viewjs使用方法     投稿:jingxian   下面小编就为大家带来一篇网页中的图片查看器viewjs使用方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求分析:

对于网页中的图片进行连续放大(便于用户清晰查看内容)、缩小,旋转等操作,可以使用viewjs图片查看器插件实现。

viewjs官方网址:

具体使用方法请参照官网说明。

下面做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使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888