iviewer插件
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插件的更多相关文章
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告
最近在做基于jenkins ant junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案（三）
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件
昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...
- 使用Visual Studio SDK制作GLSL词法着色插件
使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...
- 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！
如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...
- 10个最好用的HTML/CSS 工具、插件和资料库
大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...
- 在Sublime Text 3上安装代码格式化插件CodeFormatter
1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...
随机推荐
- Ubuntu1604环境下编译安装mariadb10.2.26
环境准备:阿里云ecs Ubuntu1604下,编译安装mariadb10-2.26 1.先安装一些初试环境所需要的工具软件包 apt install -y iproute2 ntpdate tcpd ...
- POJ-1743 Musical Theme(最长不可重叠子串，后缀数组+二分)
A musical melody is represented as a sequence of N (1<=N<=20000)notes that are integers in the ...
- Python之Flask项目开发【入门必学】
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:藤藤菜丶 Flask 安装Flask模块 创建一个Flask项目 运行 ...
- Java并发：线程限制
最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想,也和大家分享.了解有关Java中的并发问题和线程限制的更多信息. 在此文中,我们将探讨线程限制,它的含义以及如何实现.因此 ...
- Django（一）：url路由配置和模板渲染
urls.py路由用法 url基本概念 url格式 urls.py的作用 url解析过程 include的作用 kwarg的作用 name的作用 URL概念 URL(Uniform Resoure L ...
- 大数据学习笔记——Linux完整部署篇(实操部分)
Linux环境搭建完整操作流程(包含mysql的安装步骤) 从现在开始,就正式进入到大数据学习的前置工作了,即Linux的学习以及安装,作为运行大数据框架的基础环境,Linux操作系统的重要性自然不言 ...
- hdu 5532 Almost Sorted Array (水题)
Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Ot ...
- [ASP.NET Core 3框架揭秘] 配置[3]：配置模型总体设计
在<读取配置数据>([上篇],[下篇])上面一节中,我们通过实例的方式演示了几种典型的配置读取方式,接下来我们从设计的维度来重写认识配置模型.配置的编程模型涉及到三个核心对象,分别通过三个 ...
- d3.js 共享交换平台demo
今天在群里遇到一张图 遂来玩一玩,先来上图!! 点击相应按钮,开关线路,此项目的重点是计算相应图形的位置,由于是个性化项目就没有封装布局.好了直接上代码. <!DOCTYPE html> ...
- Windows 10 - 查看系统剪切板历史
在之前的Windows版本(1809之前),Windows的剪切板历史一直都是对用户不可见的. 也就是它只保留最后一次的剪切记录,但是这个记录是什么,不知道!只能粘贴出来才知道. 但是现在变了,Win ...