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>
相关推荐
annan 2020-07-18
举 2020-06-27
harddays 2020-06-21
长安长夜Saint 2020-06-14
Magicsoftware 2020-06-04
soyo 2020-05-28
haocxy 2020-05-28
davidliu00 2020-05-26
coolhty 2020-05-20
niehanmin 2020-05-19
无缘公子 2020-05-19
fansenjun 2020-03-01
zmosquito 2020-05-10
玫瑰小妖 2020-05-10
jianghero 2020-05-05
jocleyn 2020-05-03
angqiuli 2020-04-26
waterv 2020-04-26
wcqwcq 2020-04-22