[原创]图片区域截取缩放插件 jQuery imgCut
文章来源：365jz.com 点击数：1160 更新时间：2009-09-18 10:16 参与评论
结合这两篇文章而写的
利用jQuery UI 实现图片部份截取
利用jQuery UI 实现图片局部放大
调用需求
调用
选项
top:0, //框框初始位置
left:0,//框框初始位置
width:100, //框框大小
height:100,//框框大小
imageWidth:400,//图片宽度
imageHeight:400,//图片高度
minHeight:30,//框框最小
minWidth:30,//框框最小
zoom:1,//缩放倍数
border:{border:'solid 2px blue'},//框框CSS
dragopts:{}, //拖动选项，请参考jquery官方UI
resizeopts:{}, //大小选项，请参考jquery官方UI
idprox:'imgcut' //id前缀（当一个页面调用多次此UI时使用)
src:"abc.jpg" //图片
obj:"#obj" //截取后的图片存放处（为jquery的selector)
HTML
范例
演示
下载
利用jQuery UI 实现图片部份截取
利用jQuery UI 实现图片局部放大
调用需求
<link type="text/css" href="redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.imgcut.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.resizable.js"></script>
<script type="text/javascript" src="ui.imgcut.js"></script>
调用
$(selector).imgCut(options);
选项
top:0, //框框初始位置
left:0,//框框初始位置
width:100, //框框大小
height:100,//框框大小
imageWidth:400,//图片宽度
imageHeight:400,//图片高度
minHeight:30,//框框最小
minWidth:30,//框框最小
zoom:1,//缩放倍数
border:{border:'solid 2px blue'},//框框CSS
dragopts:{}, //拖动选项，请参考jquery官方UI
resizeopts:{}, //大小选项，请参考jquery官方UI
idprox:'imgcut' //id前缀（当一个页面调用多次此UI时使用)
src:"abc.jpg" //图片
obj:"#obj" //截取后的图片存放处（为jquery的selector)
HTML
<div id='c'></div>
<div id='o' style='top:500px'></div>
<div id='o' style='top:500px'></div>
范例
$("#c").imgCut({
src:"1.jpg",
imageWidth:732,//图片大小
imageHeight:458,//图片大小
zoom:2,//放大两倍
obj:"#o" //缩放后的selector
});
src:"1.jpg",
imageWidth:732,//图片大小
imageHeight:458,//图片大小
zoom:2,//放大两倍
obj:"#o" //缩放后的selector
});
演示
下载
Tag标签: jQueryUI
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
- 上一篇：Bing Photo Gallery
- 下一篇：extjs排版
