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. 有奖投票丨HC2019开发者关注的TOP10问题你最想听哪个？

    目前,人工智能已经成为广大开发者重点关注的技术领域.然而,随着人工智能技术的快速发展,AI应用场景复杂度在与日俱增,算法调教也亟需不断成熟,这些都为开发者们带来了更多全新的挑战.如何快速把握前沿技术的 ...

  2. react-native scrollview触摸滚动事件

    目录 1.几个已知的滑动或者滑动开始结束的方法: 2.还有其他的一些事件如下 3.下面就这些方法的顺序做个简单的介绍: 4.android上的时间分为两种,一个是滑动一次,一个是连续滑动两次甚至多次, ...

  3. 压缩感知重构算法之CoSaMP算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  4. GlusterFS缺陷

    glusterfs缺陷 转自:http://www.liuwq.com/2017/04/20/glusterfs%E8%AF%A6%E8%A7%A3/ glusterfs 原理.优势.使用范围等 Gl ...

  5. 【Vuejs】317- 提升90%加载速度——Vuecli下的首屏性能优化

    点击上方"前端自习课"关注,学习起来~,所以接下来还会介绍一些它们在优化上的异同 的话,先安装插件 cnpm intall webpack-bundle-analyzer –sav ...

  6. vue实现双向绑定的基础方法

    Vue2的组件props通信方式 在Vue2中组件的props的数据流动改为了只能单向流动,即只能由组件外(调用组件方)通过组件的DOM属性attribute传递props给组件内,组件内只能被动接收 ...

  7. git 中的 merge 和 rebase

    示例分支:master . dev 把 dev 分支上的新内容合并到 master 上 先切换分支到master git checkout master 合并操作 git merge dev 或者 g ...

  8. Vue中使用keep-alive优化网页性能

    用keep-alive包裹路由 当前数据第一次访问时,会被缓存到浏览器缓存当中,若数据无更替,则直接读取缓存中的数据. 使用keep-alive时会存在一个activated的生命周期钩子 只有在la ...

  9. web开发中浏览器跨域问题

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  10. oc实现小型学生管理系统

                              首先,创建一个工程,然后加入两个cocoaclass,分别命名为Student   和 StudentSystem.   然后就可以开始写代码喽   ...