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文档

那需要创建一个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>

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

        <script type="text/javascript">

            $(function(){

                $("#myDiv").iviewer({

                    src:"../img/5.jpg",//使用src: 来添加图片

                });

            })

        </script>

结果如下

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

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

是否禁用工具栏

是否禁用动画效果

        <script type="text/javascript">

            $(function(){

                $("#myDiv").iviewer({

                    src:"../img/5.jpg",//添加图片

                    ui_disabled:true,//是否禁用工具栏        true表示禁用

                    zoom_animation:true,//是否禁用动画效果    true表示禁用

                });

            })

        </script>

iviewer插件的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  3. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  4. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  5. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  6. 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  7. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  8. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

  9. 在Sublime Text 3上安装代码格式化插件CodeFormatter

    1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...

随机推荐

  1. Python面试的一些心得，与Python练习题分享【华为云技术分享】

    版权声明:本文为CSDN博主「华为云」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/devcloud/arti ...

  2. 你知道 http 响应头中的 ETag 是如何生成的吗

    关于 etag 的生成需要满足几个条件 当文件不会更改时,etag 值保持不变.所以不能单纯使用 inode 便于计算,不会特别耗 CPU.这样子 hash 不是特别合适 便于横向扩展,多个 node ...

  3. FSM有限状态机 ---C#、Unity

    抽象类State public interface State//定义状态接口 { void Init();//初始化 int GetCurrentStateId();//返回当前状态Id void ...

  4. 洛谷 题解 CF1151D 【Stas and the Queue at the Buffet】

    本蒟蒻又双叒叕被爆踩辣!!! 题目链接 这道题我个人觉得没有紫题的水平. 步入正题 先看题: 共有n个人,每个人2个属性,a,b; 窝们要求的是总的不满意度最小,最满意度的公式是什么? \(ai * ...

  5. mint UI MessageBox 使用

    一.全局注册 1.在main.js中引入 //引入 import { MessageBox } from 'mint-ui';   //全局使用,挂载到原型上 Vue.prototype.$messa ...

  6. C#开发安卓自学笔记1

    今天开始研究了下C#开发安卓,刚开始什么都不懂,学过安卓的同学们也是用Java开发的,虽然两者开发差别不大,但是还是有差别的 // Set our view from the "main&q ...

  7. git 使用详解 (1)——历史

    版本控制系统(VCS) 有了它你就可以将某个文件回溯到之前的状态,甚至将整个项目都回退到过去某个时间点的状态.你可以比较文件的变化细节,查出最后是谁修改了哪个地方,从而导致出现怪异问题,又是谁在何时报 ...

  8. Java修炼——面向对象的三大特征_封装的使用

    封装的作用含义:程序设计追求"高内聚,低耦合" 1.提高代码的安全性 2.提高代码的复用性 3."高内聚":封装细节,便于修改内部代码,提高可 维护性 4.&q ...

  9. 初步认知jQuery

    jQuery:是JavaScript的一个类库全写JavaScript query   write less do more JavaScript查询写的更少做的更多 第一步先导入js文件: < ...

  10. openlayers5-webpack 入门开发系列结合 turf.js 实现等值线（附源码下载）

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...