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. 洛谷 CF402A Nuts 题解

    本蒟蒻又来发题解啦! 这题是个紫题? 好吧,恶意评分可海星? 回到正题 这题很明显是贪心啊: 有a个坚果,b个隔板,x个隔板,最多分成v个区间. 那么我们的贪心策略是: 如果一共使用的挡板小于x,且当 ...

  2. react-native-splash-screen 隐藏statusbar

    目录 android ios android android/app/src/main/java/项目名/MainActivity.java @Override protected void onCr ...

  3. git 使用详解（9）-- 分支的新建与合并 git branch -d、merge、 --merged/--no-merged/-v

    现在让我们来看一个简单的分支与合并的例子,实际工作中大体也会用到这样的工作流程: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 假设此时,你突然接到一个电话说有个很严重的 ...

  4. 基于 SOA 架构,创建 ego-search-web 项目-solr集群-zookeeper集群

    项目架构 Ego-search-web 服务的消费者,ego-rpc 服务提供者 建立 ego-search-web 项目 继承:ego 依赖:ego-common   ego-rpc-service ...

  5. Redis的优缺点小结

    Redis(Remote Dictionary Server 远程数据服务),一个 Key-value(键值对)存储系统,典型的 NoSQL 数据库服务器. 优点: 1.支持丰富的数据类型,如:Str ...

  6. 【Java Web开发学习】Spring MVC添加自定义Servlet、Filter、Listener

    [Java Web开发学习]Spring MVC添加自定义Servlet.Filter.Listener 转载:https://www.cnblogs.com/yangchongxing/p/9968 ...

  7. 【HttpClient】使用学习

    HttpClient使用学习 HttpClient Tutorial:http://hc.apache.org/httpcomponents-client-4.5.x/tutorial/html/in ...

  8. 5分钟搞清楚Synchronized和Lock的概念与区别

    前言 并发编程中,锁是经常需要用到的,今天我们一起来看下Java中的锁机制:synchronized和lock. Synchronized 和 Lock的概念 Synchronized 是Java 并 ...

  9. Harbor搭建企业级docker仓库

    一. Harbor简介 1.1 Harbor介绍 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Do ...

  10. fineuploader php服务端

    新版本的fineuploader项目中已经没有现成的php server端,需要额外使用composer进行安装,折腾好久才下下来,在此分享出来给大家. 下载地址: http://files.cnbl ...