HTML图片查看之viewerJs

2024-10-12

viewerjs 在html打开图片或打开pdf文件使用案例

开发者常用到在线访问pdf,txt,浏览图片的插件,这里推荐viewer.js这个插件,简单好用.它的核心亮点就是查看图片和pdf功能.老早以前就用过的,昨天一个小伙伴问我Android开发在线浏览pdf怎么弄?我一下想到这个插件,帮人搞出来了,感觉这个还是得总结一下才好,不然觉得简单又容易忘记. 1.使用viewerjs浏览图片使用前需要先引入:css.js <link rel="stylesheet" type="text/css" href="

vue好用的图片查看器(v-viewer插件)

在开发中,经常会遇到这样的需求,就是点击图片,能够放大预览.在网上找到了一款很好用的插件.拿来即用,不需要复杂的配置.特此记录下(这里只是针对于在vue脚手架下的使用方法). 1.安装依赖包. npm install v-viewer --save 2.在main.js中配置如下: import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer, { defaultOptions: { zIndex:

网页中的图片查看器viewjs使用

需求分析: 对于网页中的图片进行连续放大(便于用户清晰查看内容).缩小,旋转等操作,可以使用viewjs图片查看器插件实现. viewjs官方网址:https://github.com/fengyuanchen/viewerjs 具体使用方法请参照官网说明. 下面做2个简单的示例: 1.示例一:单一图片 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"

Viewer.js – 强大的JS/jQuery图片查看器

简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略图支持标题显示支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,您可以任意选择. 浏览器兼容 I

vue图片查看器

vue 安装图片查看器插件安装cnpm install v-viewer引用 import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer)用法 render函数中调用异步加载,西药render之后马上给图片数组赋值,否则报错: render: (h, params) => { this.imageUrls = [ "http://t2.hddhhn

wpf 仿QQ图片查看器

参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽实现效果主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图. 2.右下角不支持拖动白色区域主图跟着变位置,参考的博客里有这方面支持的代码,但不完善,这里也没有做. 源代码 http://pan.baidu.com/s/1qXYVFcg

发布两款JQ小插件（图片查看器 + 分类选择器），开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

wpf图片查看器，支持鼠标滚动缩放拖拽

最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class="PictureViewer.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/wi

用JQ仿造礼德财富网的图片查看器

现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互.滥用插件,像今天要仿造的图片查看器,礼德财富也是直接套用的一款叫fancybox的插件: 个人觉得一名合格的前端还是要少用外部插件,减少代码冗余,也方便自己维护(毕竟自己的代码自己一清二楚). 今天咱用JQ来做个属于我们自己的图片查看器,刚好我项目也要用到. 还是老样子,大家可以到我的Github

基于jQuery的一个简单的图片查看器

项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易,代码也比较简单图片查看器主要有几个功能: 1.显示图片和图片信息(图片名称.发布者等等) 2.切换图片 3.关闭图片查看器初始化接口函数pictureViewer.init: function(picInfos,tapNumber,isBig) picInfos: 传入图片组信息,必须,格式如

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. 多张图片切换,键盘左右键或左右箭头切换 2. 旋转 3. 放大,支持鼠标滚轮 4. 缩小,支持鼠标滚轮 5. 右下角缩略图 6. 拖拽大图 7. 全屏 PS:下面是插件各状态下效果,demo示例会在最后放出来. 全屏全屏是容器的最大化. 缩小可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片. 放

微信内置浏览器图片查看方式的原生实现(非jssdk)

对于非公众平台网页,想调起图片预览组件,就跟公众号文章一样的图片阅读方式,实现起来是比较简单的,官方也提供了jssdk来做这个.详见 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.A2.84.E8.A7.88.E5.9B.BE.E7.89.87.E6.8E.A5.E5.8F.A3 但是本文并未采用jssdk实现,为什么呢? jssdk需要先行注入配置,而配置需要到微信服务器进行验证,这样一来,会导

Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）

Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看插件.希望可以帮助到大家,有不对的地方也欢迎大家给以正确的指导. (1)discuz的实现过程及效果 (2)discuz的局限性 (3)discuz的改进步骤 (4)兼容性及最后效果 (5)总结(常见问题) demo示例:http://zyk3.ataw.cn/discuz/index.html 一

Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView 两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImageView 和 UISlider 分别定义插座变量,两个 UIButton 分别连接两个Action next和previous ,在为 UISlider 连接一个Action 事件. 再在.h 文件中声明两个实例变量. NSInteger index ; NSMutableArray* ar

SQLSERVER图片查看工具SQL Image Viewer5.5.0.156

原文:SQLSERVER图片查看工具SQL Image Viewer5.5.0.156 SQLSERVER图片查看工具SQL Image Viewer5.5.0.156 在2013年某一次北京SQL PASS会议中,格瑞趋势的王中涛大侠就介绍了一款数据库图片查看工具不知道大家有没有印象不过这篇文章介绍的插件不是集成到SSMS当中的这个工具的下载地址:http://www.kuaipan.cn/file/id_4401224786927352.htm 大家也可以到官网去下载:http://w

Window Phone 8 应用程序连接扩展图片中心，图片扩展，图片查看器

WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xmlns="http://schemas.microsoft.com/windowsphone/2012/deployment" AppPlatformVersion="8.0"> <DefaultLanguage xmlns="" cod

js手写图片查看器（图片的缩放、旋转、拖拽）

在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onload="l

Win 10中使用图片查看器

在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你可能希望回到win7的时代,使用经典的图片查看器. 可以通过注册表的方式关联图片格式与经典的图片查看器. 复制以下注册表项,保存为.reg文件,并以合并方式打开写入注册表即可.当然你也可以事先编辑以选择需要关联的文件类型. Windows Registry Editor Version 5.00 ;

jQuery 图片查看插件 Magnify 开发简介（仿 Windows 照片查看器）

前言因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功能,比如模态窗的拖拽.调整大小.最大化,图片的缩放.旋转,平移.键盘控制等.插件的样式都是最基础的 CSS,定制非常容易,可以轻松修改成自己喜欢的样式.随后会陆续发布 React 及 Vue 相关版本的插件.本文主要介绍插件的特点及使用方法,而关于插件开发的细节将会在之后的具体文章中说明. Github: https://github.c

linux上的图片查看器FEH_image_view

Linux上的图片查看器, 简单,没有多余功能,打开快速,体积小在终端用feh # 直接执行feh显示当前目录所有图片 feh # 或者指定图片名 feh pic1 pic2 pic3 # 显示一个目录里所有图片 feh dirname 在文件管理器里用feh 你可以把图片打开方式设为feh,但这样只能打开你选中的图片下面的脚本可以让你打开图片时先显示选中的图片,同时可以浏览目录里的其他图片 #!/bin/bash shopt -s nullglob if [[ ! -f $1 ]]; th

js实现图片查看器（图片的缩放、旋转、拖拽）

一.关于图片查看器. 目前网络上能找到的图片查看器很多,谁便一搜就能出来.如:jquery.iviewer.js.Viewer.js这两个js文件,其中功能也足够满足大部分开发需求.但是单纯的就想实现图片的缩放.旋转.回位.拖拽.这些插件就有些多余,而且里面代码还没看.所以这里向大家介绍一种图片查看器的实现方法! 二.简单的Demo构造 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

HTML图片查看之viewerJs

热门专题