iviewer插件

xiaoge00 2019-12-07

jQuery-iviewer插件的使用

iviewer是一个具有缩放和图像旋转功能的图像查看小部件。

在jQuery官网下载后，有很多文件。

直接把文件夹解压拖到项目里。

然后再html中引入主要的文件。

<!-- css样式文件 -->
        <link rel="stylesheet" type="text/css" href="../iviewer-master/jquery.iviewer.css"/>
        <!-- jQuery库 -->
        <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <!-- iviewer-ui文件 -->
        <script src="../iviewer-master/test/jqueryui.js" type="text/javascript" charset="utf-8"></script>
        <!-- iviewer-鼠标滚轮js -->
        <script src="../iviewer-master/test/jquery.mousewheel.js" type="text/javascript" charset="utf-8"></script>
        <!-- iviewer.js -->
        <script src="../iviewer-master/jquery.iviewer.js" type="text/javascript" charset="utf-8"></script>

然后查看官网上iviewer文档

iviewer插件

 那需要创建一个div

<body>
        <div id="myDiv">
            
        </div>
    </body>

给div设置一个定位和样式

<style type="text/css">
            #myDiv{
                position: relative;/* 相对定位 */
                width: 50%;    /* 宽度 */
                height: 500px;    /* 高度 */
                border: #CCCCCC 1px solid; /* 边框*/
                margin: 0 auto;    /* 外边距 */
            }
            
        </style>

iviewer插件

然后需要在div中添加图片并运行插件

<script type="text/javascript">
            $(function(){
                $("#myDiv").iviewer({
                    src:"../img/5.jpg",//使用src: 来添加图片
                });
            })
        </script>

结果如下

iviewer插件

 可以进行缩放旋转等操作。

在官网文档中还有选项，例如

是否禁用工具栏

是否禁用动画效果

<script type="text/javascript">
            $(function(){
                $("#myDiv").iviewer({
                    src:"../img/5.jpg",//添加图片
                    ui_disabled:true,//是否禁用工具栏        true表示禁用
                    zoom_animation:true,//是否禁用动画效果    true表示禁用
                });
            })
        </script>

iviewer插件

iviewer插件

xiaoge00

xiaoge00

相关推荐

Ansible自动化

目录第一章 前提条件1.1创建ssh密钥对 1.2分发公钥文件 1.3编写脚本 1.4端口被更改 第二章 安装测试2.1 安装配置 2.2 常用模块说明 2.3 command模块 2.4 shell模块 2.5 scr

annan / 0评论 2020-07-18

练习13--参数，解包，变量

本次习题的主要内容是学习如何编写一个可以接收多个命令行参数的脚本程序，其中涉及到三个新的知识点是：如何导入一个模块、参数是什么以及解包的概念。1 导入：其目的是将python的库/模块/功能导入到我们的脚本程序中，使得脚本程序可以直接使用python中的一

举 / 0评论 2020-06-27

Django中配置静态文件夹static

<link rel="stylesheet" href="{% static ‘libs/bootstrap-table-master/bootstrap-table.css‘ %}">

harddays / 0评论 2020-06-21

通过二进制比较，修改某网游LuaJIT加密脚本

某传奇类手机网游，其界面中有一个“挂机”按钮，能够在野外地图中自动打怪、捡取物品等。但在某些“挑战地图”中该按钮无法使用，只能依靠手刷。然而如果氪金40元宝，就可以解锁“挑战地图”的挂机功能，还能获得额外的奖励，说来也是比较良心的。不，作为一名Cracke

长安长夜Saint / 0评论 2020-06-14

Promise 异步

层层回调，就叫回调地狱。ES6是如何通过异步操作来实现的呢？script.onload=()=>resolve;//返回状态：fulfilled，返回结果：resule. script.onerror=()=>reject;//返回状态：rej

Magicsoftware / 0评论 2020-06-04

Redis 慢查询与弱事务

# The following time is expressed in microseconds, so 1000000 is equivalent. # to one second. Note that a negative number disabl

soyo / 0评论 2020-05-28

Javascript 在html中的嵌入方式

Javascript 作为客户端的脚本语言，主要的用途就是帮助html处理部分交互逻辑。Javascript语言同其他脚本语言一样，通过控制语句、函数、对象方法属性等来实现编程。先来介绍javascript是如何同html交互的，也就是嵌入的方式。根据ja

haocxy / 0评论 2020-05-28

pip命令报错“no perl script found in input”

windows10，命令行下使用pip命令时报错，python运行成功，且环境变量已经设置，可能是更新了新版本pip所导致

davidliu00 / 0评论 2020-05-26

JS进行Base64编码,MD5加密,URL编码实现快递鸟API接口签名验证

有网友留言说，想调用快递鸟API接口实现快递查询，但是又不懂后端开发，不懂JAVA，不懂PHP，不懂C#，也不懂python，问我能不实现快递接口查询，我说你会什么，他说,我只懂一点点JS，我回答他，已经足够了，我现在就来告诉你如何通过JS来实现600多家

coolhty / 0评论 2020-05-20

script标签中defer和async的区别

正常的html加载解析顺序是同步进行的，也就是浏览器加载html成功之后开始解析文档，这个时候如果遇到script文件就会暂停解析html文档，而下载script文件并加以解析，当解析完成后再开始继续解析html文档。defer是一个异步加载属性，当htm

niehanmin / 0评论 2020-05-19

appium inspector抓取元素、录制脚本

还没安装appium的看下之前的文章。打开后，按以下进行配置，可以在左侧一项一项填，也可以直接编辑右侧的JSON{ "platformName": "Android", "deviceName"

无缘公子 / 0评论 2020-05-19

Golang使用lua脚本实现redis原子操作

redis调用Lua脚本需要使用EVAL命令。redis 127.0.0.1:6379> EVAL script numkeys key [key ...] arg [arg ...]. 使用redis-cli调用lua脚本示例：。$ redis-c

fansenjun / 0评论 2020-03-01

jq使用jsonp实现百度搜索

什么是jsonp：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；callback函数为目标服务器的回调函数，传回来的参数data是一个对象；改变a标签超链接的wd属性就可以搜索到对应的内容；w

zmosquito / 0评论 2020-05-10

I5TING_TOC转成的HTML，怎样高亮代码

找到安装位置全局安装一般在默认位置C:\Users\administrator\AppData\Roaming\npm\node_modules\i5ting_toc

玫瑰小妖 / 0评论 2020-05-10

抓包工具Fiddler（1）- 基本介绍

说起抓包，很多人以为就是用个工具，简简单单地抓一下就可以了。在这里，我必须发一个教程，解析一下抓包神器——Fiddler。不好意思，Fiddler用得好，真的可以为所欲为。Fiddler 的作者是 Eric Lawrence 是个大师级的人物，目前在微软总

jianghero / 0评论 2020-05-05

如何使用badboy录制一个脚本并成功的导入jmeter中？

虽然，很多人已经不使用这种方式进行录制脚本了，因为不好维护。但是，还是有一些朋友在刚开始学习的过程中使用badboy。可能有人会好奇了，人家五一都出去玩了，你在家学习吗？正巧前一阵有粉丝留言给我请教这个问题，正好有时间，就写了。下面我们开始一起学习，别掉队

jocleyn / 0评论 2020-05-03

script元素属性及引入方法

表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。为此，建议异步脚本不要在加载期间修改DOM。异步脚本会在页面load事件前执行。表示通过src属性指定的代码的字符集。因此在script中设置defer属性，相当于告诉浏

angqiuli / 0评论 2020-04-26

Flask 使用CSS框架

一个Web项目不仅需要HTML模板，还需要许多静态文件，比如CSS、JavaScript文件、图片和声音声。在flask程序中，默认需要将静态文件存储在与主脚本同级目录的static文件夹中。flask内置了用于获取静态文件的视图函数，端点值为static

waterv / 0评论 2020-04-26

Ajax---案例（省市区联动）用到template()模块

<!DOCTYPE html>. padding-top:150px;<!-- script -->. <script type="text/javascript" src="/js/ajax.j

wcqwcq / 0评论 2020-04-22

Postman：Pre-request Script

Pre-request Script：前置处理，会在发出请求前执行，主要用在生成一些动态参数。var timestamp = Math.round;//自定义变量。var token = CryptoJS.MD5.toString();//自定义变量

小马的学习笔记 / 0评论 2020-04-22

解决跨域的方式（9种）

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。JSONP优点是

somebodyoneday / 0评论 2020-04-22

jsonp的创建原理或者步骤

服务端返回一个预先定义好的javascript函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。域名、端口、协议全都相同就是同源 跨域: ?--不受同源策略的标签-->. 1- 前端先定义好一个方法， 将方法名字 用s

fengchao000 / 0评论 2020-04-22

shell bash 技巧说明 shell参数 特殊书写格式

执行shell脚本三种方式的区别。脚本执行完毕,退出子shell,回到父shell。脚本执行完毕，依然是当前shell,设定的局部变量仍然有效。比如直接在Terminal中输入 exec echo hello回车,会立即退出终端.但速度相差上百倍，调用外部

pimshell / 0评论 2020-04-20

四、jQuery

　　jQuery是目前使用最广泛的javascript函数库，jQuery的版本分为1.x系列和2.x、3.x系列，1.x系列兼容低版本的浏览器，2.x、3.x系列放弃支持低版本浏览器。　　jquery是一个函数库，一个js文件，页面用script标签引入

80437916 / 0评论 2020-04-16

JSONP与CORS原理与示例

", {id:2,name:‘李四‘,sex:‘男‘},JSONP只支持GET请求，不支持POST请求。JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。CORS与JSONP的使用目的

fengchao000 / 0评论 2020-04-11

Jmeter-脚本开发

添加的定时器和断言

TesterJingel / 0评论 2020-03-23

跨域JSONP

JSONP由两部分解组成：回调函数和数据。回调函数是当相应到来的时候，应该在页面中调用的函数，数据就是传回回调函数中的JSON数据。JSONP的原理：我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的，但是在用link标签和script

fengchao000 / 0评论 2020-03-05

datatables异步获取数据、简单实用

datatables简介：Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation. 各式各样的

xiaoge00 / 0评论 2020-03-01

python 学习之javascipts中的jQuery

jQuery介绍jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。下载地址:jQuery官方网站: http://jquery.com/<script type="text/javascript&qu

tthappyer / 0评论 2020-02-24

java初探（1）之静态页面化——客户端缓存

利用服务端缓存技术，将页面和对象缓存在redis中，可以减少时间浪费，内存开销。但在每次请求的过程中，仍然会有大量静态资源的请求和返回。使用静态页面技术，页面不必要使用页面交互技术，比如thymeleaf，jsp等。当进入商品列表页面时，详情的点击不在通过

zgwyfz / 0评论 2020-02-22

黑帽JS跳转

<SCRIPT LANGUAGE=”javascript”> js脚本开始；window.open 弹出新窗口的命令；‘newwindow’ 弹出窗口的名字，非必须，可用空’代替；left=0 窗口距离屏幕左侧的象素值。<script l

xiyang / 0评论 2020-02-19

使用图片跨域方式获取图片数据 使用 jsonp 方式跨域获取数据

server.get(`/mockImg`, (req, res, next) => { // 使用图片跨域方式获取图片数据。window[cbName] = res => {cb && cb; resove}. const s

xiaouncle / 0评论 2020-02-13

shell 条件测试

-e test/ ] && mkdir test/ #如果test/文件夹并存在，就创建。MEM_USE=`free -m|grep "^M"|awk '{print $3/$2 *100}'|cut -d . -f1`

Sabrina / 0评论 2020-01-24

Raphaël—JavaScript Library

研究了一天的拉菲尔，呼呼，在我贫乏的JS基础上研究了这么些，算是初步完成我想要的效果吧，明天继续，希望能实现我要的效果。var path = [["M", x, y], ["C", ax, ay, bx, by, z

虫二在路上 / 0评论 2013-05-15

javascript脚本阻塞与模块化加载 #转载#

如果将脚本放在head内，那么再脚本执行完毕之前，显示给用户的始终是一片空白，用户只能傻傻的看着屏幕等待脚本执行完毕。不过 IE8，FF，SAFARI，CHROME已经允许脚本文件可以同时下载，不过尽管如此，javascript脚本仍然会阻塞其他脚本下载进

AndroidJava / 0评论 2013-05-31

Linux之轨迹记录(script)

exec /usr/bin/script -t 2>/var/log/script/$USER-$UID-`date +%Y%m%d%H%M`.date -a -f -q /var/log/script/$USER-$UID-`date +%Y%m%

cuixingwudi / 0评论 2020-01-19

javascript生成指定位数的随机数

document.write("请输入要生成随机数的位数：");alert("请输入数字");var sourceStr="0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G";a

yfisaboy / 0评论 2020-01-19

Labview中使用matlab script方法

Labview是美国NI公司开发的编程语言，与C和VB这些文本语言不同的是，labview采用图形化编程，用图标代替文本创建应用程序。Labview采用的是数据流的编程方式，以节点输入输出数据的流向决定VI执行顺序。Matlab是mathworks公司发布

zhiliang / 0评论 2020-01-17

Jmeter录制脚本fiddler

jmeter录制脚本有多种方法，例如badboy、fiddler、jmeter自带的等。不过直接导出的脚本会有写乱七八糟的东西，这样看来我们还得花一定的时间去整理，不过我们在这里可以使用过滤去处理，如下图：

jocleyn / 0评论 2020-01-08

XSS Payload List

xss的攻击原理就是前端被插入了恶意的js代码，下面展示大部分可以执行js的标签、事件、属性；<script firefox>alert</script> //其实我们并不需要一个规范的script标签。<script/sr

csxiaoqiang / 0评论 2020-01-06

script—实时监控服务登陆者的操作

解析：script -t 2>time.file -a scriptfile执行完这个命令，接下来的任何操作都会被记录。其中的time.file是时序记录文件，记录了几秒执行的命令；scriptfile是命令执行记录文件，记录下执行是哪些命令，这两个

流量监控lookman / 0评论 2020-01-06

LABjs学习（一）之无阻塞动态并行加载脚本文件以及管理执行顺序

LABjs是一个动态的脚本加载器，LABjs的定义特性是能够在浏览器允许的范围内以最快的速度并行加载所有JavaScript文件，但是如果文件之间存在依赖关系，则可以选择确保正确的执行顺序。这里需要注意的是，可以同时运行多条$LAB链，但是它们之间是完全独

angqiuli / 0评论 2020-01-06

Jmeter + Badboy进行脚本录制 对 Webtours进行多用户并发测试

我们这里使用Loadrunner自在的Webtours订票系统，进行脚本录制。　　1.打开Badboy，输入Webtours地址，然后访问，使用默认的用户名和密码完成一次购票流程！（这里我是把Webtours安装在了我的Windows本机上面的，所以显示启

goodby / 0评论 2020-01-05

3种python调用其他脚本的方法，你还知道其他的方法吗？

遇到问题没人解答？小编创建了一个Python学习交流QQ群：579817333. 寻找有志同道合的小伙伴，互帮互助,群里还有不错的视频学习教程和PDF电子书！os.system.popen() 这个方法会打开一个管道，返回结果是一个连接管道的文件对象，该文

jacktangj / 0评论 2020-01-05

jmeter怎么录制脚本（以百度为例）

　　jmeter录制脚本，是每一个性能测试工程师必须会的技能。本文以百度为例，录制访问百度的脚本。创建一个HTTP代理服务器

Cherishyuu / 0评论 2020-01-04

VUE+axios+php获取后端数据（宝塔面板）

总是听别人说axios好，好在哪里咱也不知道，继上一篇博文还不懂axios，现在稍微可以应用了（暗暗加油！看官网教程的时候一直困惑axios里的url到底是什么，很长一个url链接搞的我更迷惑了。-- head中引入了element,vue,vue-rou

85423468 / 0评论 2020-01-03

Linux 使用脚本安装MySQL数据库

在Linux安装软件，对于开发人员来说，也许很简单，但是对于一些工程或者直接用户来说，他们连最起码的命令都不懂，更不用提安装什么软件。mysql -u root -e "use mysql;set password for root@localh

helencoder / 0评论 2013-03-29

DataTables Bootstrap 3 example

<!

yfisaboy / 0评论 2019-12-31

每日思考（2019/12/29）

js放在html的<body>和<head>有什么区别？说说浏览器解析CSS选择器的过程？在HTML body部分中的js会在页面加载的时候被执行。在HTML head部分中的js会在被调用的时候才执行，但是在主页和其余部分代码之前

行吟阁 / 0评论 2019-12-29

脚本加密python

混淆项目代码步骤：

LczPtr / 0评论 2019-12-27