网页中的图片查看器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使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; } td { font-size: 12px; line-height: 150%; } drag = 0 move = 0 //
-
移动端js图片查看器
本文实例为大家分享了js图片查看器插件的使用方法,制作手机使用的网页图片查看器,供大家参考,具体内容如下 这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求. 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能. 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图
-
jQuery实现简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单 图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器 初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如
-
网页中的图片查看器viewjs使用方法
需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"
-
python使用正则表达式分析网页中的图片并进行替换的方法
本文实例讲述了python使用正则表达式分析网页中的图片并进行替换的方法.分享给大家供大家参考.具体分析如下: 这段代码分析网页中的所有图片表单<img>,分析后为其前后添加相应的修饰标签,并添加到图片的超级链接. 复制代码 代码如下: result = value.replace("[ page ]","").replace(' ',u' ') p=re.compile(r'''(<img\b[^<>]*?\bsrc[\s\t\r\
-
require、backbone等重构手机图片查看器
本文是对之前的部分补充,也是对最近学习require.backbone的一次实例化的实践,希望对正在学习理解中的同学们有帮助 前文请前往:制作手机使用的网页图片查看器 新手机图片查看器 网页部分 require引入是重点,指明了主函数所在文件路径 <!doctype html> <html lang="zh-cn"> <head> <title>webapp图片查看器</title> <meta charset=&quo
-
C#如何实现图片查看器
这篇文章将简单介绍下如何使用C#来实现一个图片查看器的功能的,该工具保存的功能有: 1. 可以通过"上一张" "下一张"这样的按钮来轮换浏览图片 2.实现对图片的旋转 3.实现对旋转后图片的保存功能.本程序不仅提供旋转90/180/270这样的实现,同时提供一个方法来完成旋转任意角度的实现 4.该程序未实现Windows图片查看图片缩放的功能,这部分的功能主要要点是改变图片在PictureBox控件中的高度和宽度就可以的 二.实现思路 2.1 图片轮换浏览功能的
-
Android实现的可以调整透明度的图片查看器实例
本文以实例讲解了基于Android的可以调整透明度的图片查看器实现方法,具体如下: main.xml部分代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent"
-
CSS+JS构建的图片查看器
这是一个使用 CSS + JS 构建的简易图片查看器,采用缩略图点击查看大图,可以分别显示每张图片的描述,大图显示位置采用固定宽度和高度,超出部分隐藏,点击大图可查看完全尺寸,兼容性:IE.Firefox .Opera. JS部分 function showPic (whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichp
-
viewpager+photoview实现图片查看器
本文实例为大家分享了Android实现图片查看器的具体代码,供大家参考,具体内容如下 效果需要两个手指禁止缩放,所以没有光标,只能用手机投放电脑上录制动态图片: demo中实用了一个第三方的photoview,非常简单实用:可实现图片双击放大,手势放大缩小,当手指离开屏幕时如果图片小于原图可自动恢复原图大小,可实现点击监听,长按图片监听: 整个demo非常简单,整体就是一个activity,页面布局只有一个viewpager和textview <RelativeLayout xmlns:andr