學php gd庫看到有圖片裁剪正好整一個嗯其實挺簡單的php版 複製代碼 程式碼如下: Resize <br>*{ padding:0; margin:0;} <br>ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; } <br>li{ float:left; width:500px;} <br>#container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);} <br>#container .block{height:100px; width:100px; border:1px solid #000000; position:absolute; left:50px; top:50px; background:#fff;filter:alpha(opacity=30);opacity:0.3; cursor:move;} <br>.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{ <br>position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;} <br>.rLeftDown,.rRightUp{cursor:ne-resize;} <br>.rRightDown,.rLeftUp{cursor:nw-resize;} <br>.rRight,.rLeft{cursor:e-resize;} <br>.rUp,.rDown{cursor:n-resize;} <br>.rRightDown{ bottom:-3px; right:-3px;} <br>.rLeftDown{ bottom:-3px; left:-3px;} <br>.rRightUp{ top:-3px; right:-3px;} <br>.rLeftUp{ top:-3px; left:-3px;} <br>.rRight{ right:-3px; top:50%} <br>.rLeft{ left:-3px; top:50%} <br>.rUp{ top:-3px; left:50%} <br>.rDown{ bottom:-3px; left:50%} <br>#imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_xx.jpg);} <br> <br>(function(){ <br>var dBody = document.body, <br>dDoc = document.documentElement; <br>var clip = function(options){ <br>this.init.call(this,options); <br>} <br>clip.prototype = { <br>options :{ <br>moveCallBack : function(){}, <br>className : "block" <br>}, <br>init : function(options){ <br>$.extend(this,this.options,options||{}); <br>if(!this.container || !this.imgC){ <br>return; <br>} <br>this.container = $(this.container); <br>var self = this; <br>this.block = $('<div class="'+this.className+'">\ <br><div action="rightDown" class="rRightDown"></div>\ <br><div action="leftDown" class="rLeftDown"></div>\ <br><div action="rightUp" class="rRightUp"></div>\ <br><div action="leftUp" class="rLeftUp"></div>\ <br><div action="right" class="rRight"></div>\ <br><div action="left" class="rLeft"></div>\ <br><div action="up" class="rUp"></div>\ <br><div action="down" class="rDown" ></div>\ <br></div>') <br>.bind("mousedown.r",function(e){self.start(e)}) <br>.appendTo(this.container[0]); <br>this.setImg() ; <br>}, <br>setImg : function(){ <br>var block = this.block; <br>this.imgC.css({ <br>height: block.height(), <br>width : block.width(), <br>"background-position" : "-" block.css("left") " -" block.css("top") <br>}); <br>}, <br>start : function(e){ <br>var $elem = $(e.target), <br>block = this.block, <br>self = this, <br>move = false, <br>container = this.container, <br>action = $elem.attr("action"); <br>//這個每次都要計算基本dom結構的改變瀏覽器的縮放都會讓裡面的值改變<br> this.offset = $.extend({height:container.height(),width:container.width()},container.offset()); <br>this.blockOriginal = {height:block.height(),width :block.width(),left:parseInt(block.css("left")),top:parseInt(block.css("top"))}; <br>if(action){ <br>this.fun = this[action]; <br>}else{ <br>this.x = e.clientX - this.offset.left - this.blockOriginal.left ; <br>this.y = e.clientY - this.offset. top - this.blockOriginal.top; <br>move = true; <br>} <br>$(document) <br>.bind("mousemove.r",function(e){self.move(e,move )}) <br>.bind("mouseup.r",function(){self.end()}); <br>}, <br>end : function(){ <br>$(document) <br>.unbind("mousemove.r") <br>.unbind("mouseup.r"); <br>}, <br>move : function(e,isMove){ <br>window.getSelection <br>? window.getSelection().removeAllRanges() <br>: document.selection.empty(); <br><br>var block = this.block; <br>if(isMove){ <br>var left = Math. max(0,e.clientX - this.offset.left - this.x); <br>left = Math.min(left,this.offset.width - this.blockOriginal.width); <br>var top = Math .max(0,e.clientY - this.offset.top - this.y); <br>top = Math.min(top,this.offset.height - this.blockOriginal.height); <br>block.css ({left:left,top:top}); <br>}else{ <br>var offset = this.fun(e); <br>block.css(offset); <br>} <br>this. setImg(); <br>this.moveCallBack(); <br>}, <br>down : function(e){ <br>var blockOriginal = this.blockOriginal, <br>sTop = Math.max(dopB.scrollTmaxT ,dDoc.scrollTop), //出現垂直方向滾動條時候要計算這個<br>offset = this.offset; <br><br>if(e.clientY-offset.top>=blockOriginal.top-sTop){ <br>var height = Math.min(offset.height - blockOriginal.top,e.clientY-offset.top-blockOriginal.top sTop), <br>top = blockOriginal.top; <br>}else{ <br>top = blockOriginal.top; <br>}else{ <br> var height = Math.min(offset.top blockOriginal.top-e.clientY-sTop,blockOriginal.top), <br>top = Math.max(e.clientY - offset.top sTop,0); <br>} <br>} <br>return {height:height, top:top}; <br>}, <br>up : function(e){ <br>var blockOriginal = this.blockOriginal, <br>sTop = Math.max(dBody. scrollTop,dDoc.scrollTop), <br>offset = this.offset; <br>if(e.clientY-offset.top-blockOriginal.heightvar top = Math.max (e.clientY-offset.top sTop,0), <br>maxHeight = blockOriginal.top blockOriginal.height, <br>height = Math.min(maxHeight,blockOriginal.top blockOriginal.height -(e.clientY-offset. top)-sTop); <br>}else{ <br><br>var height = Math.min(e.clientY-offset.top-blockOriginal.top-blockOriginal.height sTop,offset.height-blockOriginal.top- blockOriginal.height), <br>top = blockOriginal.top blockOriginal.height; <br>} <br>return {height:height, top:top}; <br>}, <unc>left : function(e){ <br>var blockOriginal = this.blockOriginal, <br>offset = this.offset; <br><br>if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left var left = Math.max(e.clientX - offset.left,0), <br>width = Math.min(blockOriginal.left blockOriginal.width,blockOriginal.left blockOriginal.width -(e.clientX-offset.left) ); <br>}else{ <br>var width = Math.min(e.clientX-offset.left-blockOriginal.left-blockOriginal.width,offset.width-blockOriginal.left-blockOriginal.width), left = blockOriginal.left blockOriginal.width; <br>} <br>return {left : left, width : width}; <br>}, <br>right : function(e){ <br>this block.Orig blockOriginal, <br>offset = this.offset; <br>if(e.clientX-offset.left>=blockOriginal.left){ <br>var width = Math.min(offset.width - blockOriginal.left,e. clientX - offset.left - blockOriginal.left), <br>left = blockOriginal.left; <br>}else{ <br>var width = Math.min(offset.left blockOriginal.left - e.clientX,blockOrig. ), <br>left = Math.max(e.clientX - offset.left,0); <br>} <br>return {left : left, width : width}; <br>}, <br>rightDown : function(e){ <br>return $.extend(this.right(e),this.down(e)); <br>}, <br>leftDown : function(e){ <br>return $.extend (this.left(e),this.down(e)); <br>}, <br>rightUp : function(e){ <br>return $.extend(this.right(e),this.up( e)); <br>}, <br>leftUp : function(e){ <br>return $.extend(this.left(e),this.up(e)); <br>}, <br> getValue : function(){ <br>var block = this.block; <br>return { <br>left : parseInt(block.css("left")), <br>top : parseInt(block.css(" top")), <br>width : block.width(), <br>height : block.height() <br>} <br>} <br>} <br>$.fn.clip = function(options ){ <br>options.container = this; <br>return new clip(options); <br>} <br>})(); <br>$("#container").clip({ <br>imgC : $("#imgC") <br>}) <br>; <br>身體> <br></unc> </div>
