分享一下我刚开发的jQuery插件,圖片切割效果,如果需要和我討論請來這裡 http://hi.baidu.com/see7di/home
效果预览:
源码:欢迎转载但请注明出处Email:See7di@Gmail.com,Seven的部落格http://hi.baidu.com/see7di/home
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>http://hi.baidu.com/see7di/home</title>
<script type='text/javascript' src="img/jquery-1.5.2.min.js"></script>
<script type='text/javascript'>
//自定義插件
//如果需要和我討論請來這裡 http://hi.baidu.com/see7di/home
(function($){
$.Jcrop=function(obj,opt){
var obj=obj,opt=opt;
if(typeof(obj)!=='object'){obj=$(obj)[0]}
if(typeof(opt)!=='object'){opt={}}
if(!('advBrowser' in opt)){
opt.advBrowser=$.browser.msie?false:true;
if($.browser.msie && $.browser.version.split('.')[0]=='8'){opt.advBrowser=true;}
}
if(!('keySupport' in opt)){opt.keySupport=$.browser.msie?false:true;}
var _opt={
xlineImg: '', //產生虛線效果的圖片
Opacity: .6, //虛線和遮罩層的透明度
keepRatio: 0, //縮放時是否保持比例
boxWidth: 0, //盒子寬度
boxHeight: 0, //盒子高度
canSelect: false, //是否允許建立新選區(如果是true則點擊鼠標選區就消失了)
canMove: true, //是否允許拖動選區
canResize: true, //是否允許修改選區
drawBorders: true, //是否顯示虛線選區
sideHandles: true, //是否顯示線中間的控制點
advBrowser: false, //false:IE8以下;true:Other
keySupport: true, //false:IE8以下;true:Other
minSelect: [0,0], //最小選擇多少選區就自動消失
minSize: [100,100], //選區的最小值
maxSize: [0,0], //選區的最大值
onChange:function(){},onSelect:function(){}//Callback
};
setOpt(opt);
var $boximg=$(obj);
var $img=$boximg.clone().removeAttr('id').css({position:'absolute'});
$img.width($boximg.width());
$img.height($boximg.height());
$boximg.after($img).hide();
presize($img,_opt.boxWidth,_opt.boxHeight);
var boundx=$img.width(),boundy=$img.height();
var $div=$('<div
/>').width(boundx).height(boundy).css({position:'relative','text-align':'left',backgroundColor:'black'}).insertAfter($boximg).append($img);
$div.before("<style type='text/css'>"+
".jcrop-vline,.jcrop-hline{font-size:0;position:absolute;background:white url('"+_opt.xlineImg+"') 0 0 repeat;}"+
".jcrop-vline{height:100%;width:1px !important;}.jcrop-hline{width:100%;height:1px !important;}"+
".jcrop-handle{font-size:1px;width:7px !important;height:7px !important;border:1px #FFF solid;background-color:#000;}"+
".custom .jcrop-handle{border-color:black;background-color:#111;-moz-border-radius:3px;-webkit-border-radius:3px;}"+
"</style>"
);
var $img2=$('<img />').attr('src',$img.attr('src')).css('position','absolute').width(boundx).height(boundy);
var $img_holder=$('<div
/>').width(pct(100)).height(pct(100)).css({zIndex:310,position:'absolute',overflow:'hidden'}).append($img2);
var $hdl_holder=$('<div />').width(pct(100)).height(pct(100)).css('zIndex',320);
var $sel=$('<div />').css({position:'absolute',zIndex:300}).insertBefore($img).append($img_holder,$hdl_holder);
var bound=8;
var
$trk=newTracker().width(boundx+(bound*2)).height(boundy+(bound*2)).css({position:'absolute',top:px(-bound),left:px(-bound),zIndex:290}).mousedown(newSelection);
var xlimit,ylimit,xmin,ymin;
var xscale,yscale,enabled=true;
var docOffset=getPos($img),btndown,lastcurs,dimmed,animating,shift_down;
var Coords=function(){
var x1=0,y1=0,x2=0,y2=0,ox,oy;
function setPressed(pos){
var pos=rebound(pos);
x2=x1=pos[0];
y2=y1=pos[1];
};
function setCurrent(pos){
var pos=rebound(pos);
ox=pos[0]-x2;
oy=pos[1]-y2;
x2=pos[0];
y2=pos[1];
};
function getOffset(){return [ox,oy];};
function moveOffset(offset){
var ox=offset[0],oy=offset[1];
if(0>x1+ox){ox-=ox+x1;}
if(0>y1+oy){oy-=oy+y1;}
if(boundy<y2+oy){oy+=boundy-(y2+oy)};
if(boundx<x2+ox){ox+=boundx-(x2+ox)};
x1+=ox;
x2+=ox;
y1+=oy;
y2+=oy;
};
function getCorner(ord){
var c=getFixed();
switch(ord){
case 'ne':return [c.x2,c.y];
case 'nw':return [c.x,c.y];
case 'se':return [c.x2,c.y2];
case 'sw':return [c.x,c.y2];
}
};
function getFixed(){//This function could use some optimization I think...
if(!_opt.keepRatio){return getRect()};
var aspect=_opt.keepRatio,
min_x=_opt.minSize[0]/xscale,
min_y=_opt.minSize[1]/yscale,
max_x=_opt.maxSize[0]/xscale,
max_y=_opt.maxSize[1]/yscale,
rw=x2-x1,
rh=y2-y1,
rwa=Math.abs(rw),
rha=Math.abs(rh),
real_ratio=rwa/rha,
xx,yy;
if(max_x==0){max_x=boundx*10}
if(max_y==0){max_y=boundy*10}
if(real_ratio<aspect){
yy=y2;
w=rha*aspect;
xx=rw<0?x1-w:w+x1;
if(xx<0){
xx=0;
h=Math.abs((xx-x1)/aspect);
yy=rh<0?y1-h:h+y1;
}else if(xx>boundx){
xx=boundx;
h=Math.abs((xx-x1)/aspect);
yy=rh<0?y1-h:h+y1;
}
}else{
xx=x2;
h=rwa/aspect;
yy=rh<0?y1-h:y1+h;
if(yy<0){
yy=0;
w=Math.abs((yy-y1)*aspect);
xx=rw<0?x1-w:w+x1;
}else if(yy>boundy){
yy=boundy;
w=Math.abs(yy-y1)*aspect;
xx=rw<0?x1-w:w+x1;
}
}
if(xx>x1){//Magic//right side
if(xx-x1<min_x){
xx=x1+min_x;
}else if(xx-x1>max_x){
xx=x1+max_x;
}
if(yy>y1){
yy=y1+(xx-x1)/aspect;
}else{
yy=y1-(xx-x1)/aspect;
}
}else if(xx<x1){//left side
if(x1-xx<min_x){
xx=x1-min_x
}else if(x1-xx>max_x){
xx=x1-max_x;
}
if(yy>y1){
yy=y1+(x1-xx)/aspect;
}else{
yy=y1-(x1-xx)/aspect;
}
}
if(xx<0){
x1-=xx;
xx=0;
}else if(xx>boundx){
x1-=xx-boundx;
xx=boundx;
}
if(yy<0){
y1-=yy;
yy=0;
}else if(yy>boundy){
y1-=yy-boundy;
yy=boundy;
}
return last=makeObj(flipCoords(x1,y1,xx,yy));
};
function rebound(p){
if(p[0]<0){p[0]=0}
if(p[1]<0){p[1]=0}
if(p[0]>boundx){p[0]=boundx}
if(p[1]>boundy){p[1]=boundy}
return [p[0],p[1]];
};
function flipCoords(x1,y1,x2,y2){
var xa=x1,xb=x2,ya=y1,yb=y2;
if(x2<x1){xa=x2;xb=x1;}
if(y2<y1){ya=y2;yb=y1;}
return [Math.round(xa),Math.round(ya),Math.round(xb),Math.round(yb)];
};
function getRect(){
var xsize=x2-x1;
var ysize=y2-y1;
if(xlimit && (Math.abs(xsize)>xlimit)){x2=(xsize>0)?(x1+xlimit):(x1-xlimit);}
if(ylimit && (Math.abs(ysize)>ylimit)){y2=(ysize>0)?(y1+ylimit):(y1-ylimit);}
if(ymin && (Math.abs(ysize)<ymin)){y2=(ysize>0)?(y1+ymin):(y1-ymin);}
if(xmin && (Math.abs(xsize)< xmin)){x2=(xsize>0)?(x1+xmin):(x1-xmin);}
if(x1<0){x2-=x1;x1-=x1;}
if(y1<0){y2-=y1;y1-=y1;}
if(x2<0){x1-=x2;x2-=x2;}
if(y2<0){y1-=y2;y2-=y2;}
if(x2>boundx){var delta=x2-boundx;x1-=delta;x2-=delta;}
if(y2>boundy){var delta=y2-boundy;y1-=delta;y2-=delta;}
if(x1>boundx){var delta=x1-boundy;y2-=delta;y1-=delta;}
if(y1>boundy){var delta=y1-boundy;y2-=delta;y1-=delta;}
return makeObj(flipCoords(x1,y1,x2,y2));
};
function makeObj(a){
return{x:a[0],y:a[1],x2:a[2],y2:a[3],w:a[2]-a[0],h:a[3]-a[1]};
};
return{flipCoords:flipCoords,setPressed:setPressed,setCurrent:setCurrent,getOffset:getOffset,moveOffset:moveOffset,getCorner:getCorner,getFixed:getFixed};
}();
var Selection=function(){
var start,end,dragmode,awake,hdep=370;
var borders={};
var handle={};
var seehandles=false;
var hhs=5;//熱點偏移位置
//Insert draggable elements//Insert border divs for outline
if(_opt.drawBorders){
borders={top:insertBorder('hline').css('top',px(0)),bottom:insertBorder('hline'),left:insertBorder('vline'),right:insertBorder('vline')};
}
//Insert handles on edges
//handle.t=insertDragbar('n');
//handle.b=insertDragbar('s');
//handle.r=insertDragbar('e');
//handle.l=insertDragbar('w');
_opt.sideHandles && createHandles(['n','s','e','w']);
createHandles(['sw','nw','ne','se']);//插入四個角的控制點
function insertBorder(type){
var jq=$('<div />').css({position:'absolute',opacity:_opt.Opacity}).addClass(cssClass(type));
$img_holder.append(jq);
return jq;
};
function dragDiv(ord,zi){
var jq=$('<div />').mousedown(createDragger(ord)).css({cursor:ord+'-resize',position:'absolute',zIndex:zi});
$hdl_holder.append(jq);
return jq;
};
function insertHandle(ord){
return dragDiv(ord,hdep++).css({top:px(-hhs+1),left:px(-hhs+1),opacity:_opt.Opacity}).addClass(cssClass('handle'));
};
function insertDragbar(ord){
var s=9,o=hhs,h=s,w=s,t=o,l=o;
switch(ord){
case 'n':case 's':w=pct(100);break;
case 'e':case 'w':h=pct(100);break;
}
return dragDiv(ord,hdep++).width(w).height(h).css({top:px(-t+1),left:px(-l+1)});
};
function createHandles(li){for(i in li){handle[li[i]]=insertHandle(li[i])}};
function moveHandles(c){
var midvert=Math.round((c.h/2)-
hhs),midhoriz=Math.round((c.w/2)-
hhs),north=west=-hhs+1,east=c.w-hhs,south=c.h-hhs,x,y;
'e' in handle &&
handle.e.css({top:px(midvert),left:px(east)}) &&
handle.w.css({top:px(midvert)}) &&
handle.s.css({top:px(south),left:px(midhoriz)}) &&
handle.n.css({left:px(midhoriz)});
'ne' in handle && handle.ne.css({left:px(east)})
&& handle.se.css({top:px(south),left:px(east)}) &&
handle.sw.css({top:px(south)});
'b' in handle && handle.b.css({top:px(south)}) && handle.r.css({left:px(east)});
};
function moveto(x,y){$img2.css({top:px(-y),left:px(-x)});$sel.css({top:px(y),left:px(x)});};
function resize(w,h){$sel.width(w).height(h);};
function refresh(){
var c=Coords.getFixed();
Coords.setPressed([c.x,c.y]);
Coords.setCurrent([c.x2,c.y2]);
updateVisible();
};
//Internal Methods
function updateVisible(){if(awake){return update()}}
function update(){
var c=Coords.getFixed();
resize(c.w,c.h);
moveto(c.x,c.y);
_opt.drawBorders &&
borders['right'].css({left:px(c.w-1)}) &&
borders['bottom'].css({top:px(c.h-1)});
seehandles && moveHandles(c);
awake || show();
_opt.onChange(unscale(c));
};
function show(){
$sel.show();
$img.css('opacity',_opt.Opacity);
awake=true;
};
function release(){
disableHandles();
$sel.hide();
$img.css('opacity',1);
awake=false;
};
function showHandles(){if(seehandles){moveHandles(Coords.getFixed());$hdl_holder.show();}};
function enableHandles(){
seehandles=true;
if(_opt.canResize){
moveHandles(Coords.getFixed());
$hdl_holder.show();
return true;
}
};
function disableHandles(){seehandles=false;$hdl_holder.hide();};
function animMode(v){(animating=v)?disableHandles():enableHandles();};
function done(){animMode(false);refresh();};
var $track=newTracker().mousedown(createDragger('move')).css({cursor:'move',position:'absolute',zIndex:360});
$img_holder.append($track);
disableHandles();
return{
updateVisible:updateVisible,update:update,release:release,refresh:refresh,setCursor:function(cursor){$track.css('cursor',cursor);},enableHandles:enableHandles,
enableOnly:function(){seehandles=true;},showHandles:showHandles,disableHandles:disableHandles,animMode:animMode,done:done
};
}();
var Tracker=function(){
var onMove=function(){},onDone=function(){},trackDoc=_opt.advBrowser;
if(!trackDoc){$trk.mousemove(trackMove).mouseup(trackUp).mouseout(trackUp);}
function toFront(){
$trk.css({zIndex:450});
if(trackDoc){$(document).mousemove(trackMove).mouseup(trackUp);}
}
function toBack(){
$trk.css({zIndex:290});
if(trackDoc){$(document).unbind('mousemove',trackMove).unbind('mouseup',trackUp);}
}
function trackMove(e){onMove(mouseAbs(e));};
function trackUp(e){
e.preventDefault();
e.stopPropagation();
if(btndown){
btndown=false;
onDone(mouseAbs(e));
_opt.onSelect(unscale(Coords.getFixed()));
toBack();
onMove=function(){};
onDone=function(){};
}
return false;
};
function activateHandlers(move,done){
btndown=true;
onMove=move;
onDone=done;
toFront();
return false;
};
function setCursor(t){$trk.css('cursor',t);};
$img.before($trk);
return{activateHandlers:activateHandlers,setCursor:setCursor};
}();
var KeyManager=function(){
var $keymgr=$('<input type="radio"
/>').css({position:'absolute',left:'-30px'}).keypress(parseKey).blur(onBlur),$keywrap=$('<div
/>').css({position:'absolute',overflow:'hidden'}).append($keymgr);
function watchKeys(){
if(_opt.keySupport){$keymgr.show();$keymgr.focus();}
};
function onBlur(e){$keymgr.hide();};
function doNudge(e,x,y){
if(_opt.canMove){
Coords.moveOffset([x,y]);
Selection.updateVisible();
};
e.preventDefault();
e.stopPropagation();
};
function parseKey(e){
if(e.ctrlKey){return true}
shift_down=e.shiftKey?true:false;
var nudge=shift_down?10:1;
switch(e.keyCode){
case 37:doNudge(e,-nudge,0);break;
case 39:doNudge(e,nudge,0);break;
case 38:doNudge(e,0,-nudge);break;
case 40:doNudge(e,0,nudge);break;
case 27:Selection.release();break;
case 9:return true;
}
return nothing(e);
};
if(_opt.keySupport){$keywrap.insertBefore($img)}
return{watchKeys:watchKeys};
}();
//Internal Methods
function px(n){return ''+parseInt(n)+'px';};
function pct(n){return ''+parseInt(n)+'%';};
function cssClass(cl){return 'jcrop-'+cl;};
function getPos(obj){//Updated in v0.9.4 to use built-in dimensions plugin
var pos=$(obj).offset();
return [pos.left,pos.top];
};
function mouseAbs(e){
return [(e.pageX-docOffset[0]),(e.pageY-docOffset[1])];
};
function setOpt(opt){
if(typeof(opt)!='object'){opt={}}
_opt=$.extend(_opt,opt);
if(typeof(_opt.onChange)!=='function'){_opt.onChange=function(){};}
if(typeof(_opt.onSelect)!=='function'){_opt.onSelect=function(){};}
};
function myCursor(type){
if(type!=lastcurs){
Tracker.setCursor(type);
//Handles.xsetCursor(type);
lastcurs=type;
}
};
function startDragMode(mode,pos){
docOffset=getPos($img);
Tracker.setCursor(mode=='move'?mode:mode+'-resize');
if(mode=='move'){return Tracker.activateHandlers(createMover(pos),doneSelect);}
var fc=Coords.getFixed();
var opp=oppLockCorner(mode);
var opc=Coords.getCorner(oppLockCorner(opp));
Coords.setPressed(Coords.getCorner(opp));
Coords.setCurrent(opc);
Tracker.activateHandlers(dragmodeHandler(mode,fc),doneSelect);
};
function dragmodeHandler(mode,f){
return function(pos){
if(!_opt.keepRatio){
switch(mode){
case 'e':pos[1]=f.y2;break;
case 'w':pos[1]=f.y2;break;
case 'n':pos[0]=f.x2;break;
case 's':pos[0]=f.x2;break;
}
}else{
switch(mode){
case 'e':pos[1]=f.y+1;break;
case 'w':pos[1]=f.y+1;break;
case 'n':pos[0]=f.x+1;break;
case 's':pos[0]=f.x+1;break;
}
}
Coords.setCurrent(pos);
Selection.update();
};
};
function createMover(pos){
var lloc=pos;
KeyManager.watchKeys();
return function(pos){
Coords.moveOffset([pos[0]-lloc[0],pos[1]-lloc[1]]);
lloc=pos;
Selection.update();
};
};
function oppLockCorner(ord){
switch(ord){
case 'n':return 'sw';
case 's':return 'nw';
case 'e':return 'nw';
case 'w':return 'ne';
case 'ne':return 'sw';
case 'nw':return 'se';
case 'se':return 'nw';
case 'sw':return 'ne';
};
};
function createDragger(ord){
return function(e){
if(_opt.disabled){return false}
if((ord=='move') && !_opt.canMove){return false}
btndown=true;
startDragMode(ord,mouseAbs(e));
e.stopPropagation();
e.preventDefault();
return false;
};
};
function presize($obj,w,h){
var nw=$obj.width(),nh=$obj.height();
if((nw>w) && w>0){nw=w;nh=(w/$obj.width())*$obj.height();}
if((nh>h) && h>0){nh=h;nw=(h/$obj.height())*$obj.width();}
xscale=$obj.width()/nw;
yscale=$obj.height()/nh;
$obj.width(nw).height(nh);
};
function unscale(c){
return{x:parseInt(c.x*xscale),y:parseInt(c.y*yscale),x2:parseInt(c.x2*xscale),y2:parseInt(c.y2*yscale),w:parseInt(c.w*xscale),h:parseInt(c.h*yscale)};
};
function doneSelect(pos){
var c=Coords.getFixed();
if(c.w>_opt.minSelect[0] && c.h>_opt.minSelect[1]){
Selection.enableHandles();
Selection.done();
}else{
Selection.release();
}
Tracker.setCursor(_opt.canSelect?'crosshair':'default');
};
function newSelection(e){
if(_opt.disabled){return false}
if(!_opt.canSelect){return false}
btndown=true;
docOffset=getPos($img);
Selection.disableHandles();
myCursor('crosshair');
var pos=mouseAbs(e);
Coords.setPressed(pos);
Tracker.activateHandlers(selectDrag,doneSelect);
KeyManager.watchKeys();
Selection.update();
e.stopPropagation();
e.preventDefault();
return false;
};
function selectDrag(pos){Coords.setCurrent(pos);Selection.update();};
function newTracker(){
var trk=$('<div></div>').css({'width':'100%','height':'100%'});
$.browser.msie && trk.css({opacity:0,backgroundColor:'white'});
return trk;
};
//API methods
function animateTo(a){
var x1=a[0]/xscale,y1=a[1]/yscale,x2=a[2]/xscale,y2=a[3]/yscale;
if(animating){return;}
var animto=Coords.flipCoords(x1,y1,x2,y2);
var c=Coords.getFixed();
var animat=initcr=[c.x,c.y,c.x2,c.y2];
var interv=20; //延遲時間
var x=animat[0];
var y=animat[1];
var x2=animat[2];
var y2=animat[3];
var ix1=animto[0]-initcr[0];
var iy1=animto[1]-initcr[1];
var ix2=animto[2]-initcr[2];
var iy2=animto[3]-initcr[3];
var pcent=0;
Selection.animMode(true);
var animator=function(){
return function(){
pcent+=(100-pcent)/3;
animat[0]=x+((pcent/100)*ix1);
animat[1]=y+((pcent/100)*iy1);
animat[2]=x2+((pcent/100)*ix2);
animat[3]=y2+((pcent/100)*iy2);
if(pcent<100){animateStart();}else{Selection.done();}
if(pcent>=99.8){pcent=100;}
setSelectRaw(animat);
};
}();
function animateStart(){window.setTimeout(animator,interv)};
animateStart();
};
function setSelect(rect){
setSelectRaw([rect[0]/xscale,rect[1]/yscale,rect[2]/xscale,rect[3]/yscale]);
};
function setSelectRaw(l){
Coords.setPressed([l[0],l[1]]);
Coords.setCurrent([l[2],l[3]]);
Selection.update();
};
function tellSelect(){return unscale(Coords.getFixed());};
function tellScaled(){return Coords.getFixed();};
function setOptNew(opt){setOpt(opt);interfaceUpdate();};
function disableCrop(){
_opt.disabled=true;
Selection.disableHandles();
Selection.setCursor('default');
Tracker.setCursor('default');
};
function enableCrop(){_opt.disabled=false;interfaceUpdate();};
function cancelCrop(){Selection.done();Tracker.activateHandlers(null,null);};
function destroy(){$div.remove();$boximg.show();};
function interfaceUpdate(alt){//This method tweaks the interface based
on _opt object.//Called when _opt are changed and at end of
initialization.
_opt.canResize?alt?Selection.enableOnly():Selection.enableHandles():Selection.disableHandles();
Tracker.setCursor(_opt.canSelect?'crosshair':'default');
Selection.setCursor(_opt.canMove?'move':'default');
$div.css('backgroundColor','black');
if('setSelect' in _opt){
setSelect(opt.setSelect);
Selection.done();
delete(_opt.setSelect);
}
if('trueSize' in _opt){
xscale=_opt.trueSize[0]/boundx;
yscale=_opt.trueSize[1]/boundy;
}
xlimit=_opt.maxSize[0] || 0;
ylimit=_opt.maxSize[1] || 0;
xmin=_opt.minSize[0] || 0;
ymin=_opt.minSize[1] || 0;
if('outerImage' in _opt){
$img.attr('src',_opt.outerImage);
delete(_opt.outerImage);
}
Selection.refresh();
};
$hdl_holder.hide();
interfaceUpdate(true);
var
api={animateTo:animateTo,setSelect:setSelect,setOpt:setOptNew,tellSelect:tellSelect,tellScaled:tellScaled,disable:disableCrop,enable:enableCrop,cancel:cancelCrop,focus:KeyManager.watchKeys,getBounds:function(){return
[boundx*xscale,boundy*yscale]},getWidgetSize:function(){return
[boundx,boundy]},release:Selection.release,destroy:destroy};
$boximg.data('Jcrop',api);
return api;
};
$.fn.Jcrop=function(_opt){
function attachWhenDone(from){
var loadsrc=_opt.useImg || from.src;
var img=new Image();
img.onload=function(){$.Jcrop(from,_opt)};
img.src=loadsrc;
};
if(typeof(_opt)!=='object'){_opt={}}
this.each(function(){ //Iterate over each object,attach Jcrop
if($(this).data('Jcrop')){ //If we've already attached to this object
if(_opt=='api'){ //The API can be requested this way(undocumented)
return $(this).data('Jcrop')
}else{ //Otherwise,we just reset the _opt...
$(this).data('Jcrop').setOpt(_opt);
}
}else{ //If we haven't been attached,preload and attach
attachWhenDone(this);
}
});
return this; //Return "this" so we're chainable a la jQuery plugin-style!
};
})(jQuery)
//插件調用
$(function(){
var api=$.Jcrop('#cropbox',{setSelect:[0,0,800,600],xlineImg:'@manage/img/loading.gif',onChange:getSize,onSelect:getSize});
function
getSize(c){$('#x').val(c.x);$('#y').val(c.y);$('#x2').val(c.x2);$('#y2').val(c.y2);$('#w').val(c.w);$('#h').val(c.h);};
$('#setsel').click(function(e){api.setSelect([0,0,250,200])});//缩略图
});
</script>
</head>
<body>
<table width='100%' border='0' cellspacing='0' cellpadding='1' style='background:#333;'>
<form action='#' method='post' id='f1'>
<input type='text' id='x' name='x'><!--X1-->
<input type='text' id='y' name='y'><!--Y1-->
<input type='text' id='x2' name='x2'><!--X2-->
<input type='text' id='y2' name='y2'><!--Y2-->
<tr><td style='border-top:1px solid #666;'
height='35'> <input type='button' class='bttn' id='setsel'
value='縮略圖'></td></tr>
<tr style='background:#000;'><td><img src='1.jpg'
id='cropbox' width='800' height='600'></td></tr>
</form></table>
留言列表
