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. 鲲鹏凌云，并行科技Paramon通过华为云鲲鹏云服务兼容性认证

    随着Cloud2.0时代到来,5G技术开始应用普及,超算云服务需求不断升级,业务多样性.数据多样性不断延伸.2019年7月,华为召开鲲鹏计算产业发展峰会,依托在联接领域坚实的基础,华为未来将着力打造智 ...

  2. CSS给元素清除浮动影响的方法，--最全四种方法

    代码实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. WWDC 2016 盛宴

    转自:http://www.jianshu.com/p/72dd8306c817 整理和维护人:pmstGitHub 链接:WWDC-2016-Feast目前只是整理官方给出的 WWDC 2016 视 ...

  4. Pandas学习（二）——双色球开奖数据分析

    学习笔记汇总 Pandas学习(一)–数据的导入 pandas学习(二)–双色球数据分析 pandas学习(三)–NAB球员薪资分析 pandas学习(四)–数据的归一化 pandas学习(五)–pa ...

  5. JavaScript基础5

    字符串操作方法和属性 length   获取字符串的长度 str.chartAt(指定字符的索引)  获取指定位置的字符 返回string类型的值 str.concat(字符串)   链接多个字符串  ...

  6. Python爬虫之cookie的获取、保存和使用【新手必学】

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:huhanghao Cookie,指某些网站为了辨别用户身份.进行ses ...

  7. 【JS】370- 总结异步编程的六种方式

    点击上方"前端自习课"关注,学习起来~ 作者:Aima https://segmentfault.com/a/1190000019188824 众所周知 JavaScript 是  ...

  8. redis（6）--redis集群之分片机制（redis-cluster）

    Redis-Cluster 即使是使用哨兵,此时的Redis集群的每个数据库依然存有集群中的所有数据,从而导致集群的总数据存储量受限于可用存储内存最小的节点,形成了木桶效应.而因为Redis是基于内存 ...

  9. Jenkins编译过程中出现ERROR_ Failed to parse POMs错误

    一.在使用jenkins编写过程中突然出现以下问题 Parsing POMs Established TCP socket on 59407 [java] $ java -cp /var/lib/je ...

  10. 【Java Web开发学习】Spring MVC 使用HTTP信息转换器

    [Java Web开发学习]Spring MVC 使用HTTP信息转换器 转载:https://www.cnblogs.com/yangchongxing/p/10186429.html @Respo ...