登 录
学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的
php版
<!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>clip</title><br /> <style type="text/css"><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 /> #container .tips{ position:absolute; padding:5px; border:1px solid #ccc;background:#fff;filter:alpha(opacity=60);opacity:0.6; display:none; font-size:12px; color:#333; ;}<br /> .tips span{ display:inline-block;zoom:1; width:28px;}<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 /> .code {<br /> background: none repeat scroll 0 0 #E3F4F9;<br /> border: 1px solid #BAE2F0;<br /> font: 12px "Courier New",Courier,monospace;<br /> margin: 30px auto;<br /> padding: 10px 10px 40px;<br /> width:980px;<br /> }<br /> .code p{ height:24px; line-height:24px;}<br /> .code span{ display:inline-block;zoom:1; margin-right:5px; width:85px; font-weight:bold; color:#00F}<br /> </style><br /> </head><br /> <body><br /> <div class="code"><br /> <div class="how">使用方法</div><br /> <p>$("#container").clip({<br /> imgC : $("#imgC"),<br /> blockClass : "block",<br /> tipsClass : "tips"<br /> });</p></p> <p> <p><span>imgC :</span> 表示裁剪图片的容器,也就是右边的图</p><br /> <p><span>blockClass :</span> block的样式名 也就是页面上的可以拖动的滑块的样式 因为怕和别的页面上的样式重名 默认是block</p><br /> <p><span>tipsClass :</span> tips的样式名 也就是页面上显示left width height top的那个span的样式名 默认是tips</p><br /> </div><br /> <ul><br /> <li><br /> <div id="container"></div><br /> </li><br /> <li><br /> <div id="imgC"></div><br /> </li><br /> </ul></p> <p><script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script><br /> <script type="text/javascript"><br /> (function(){<br /> var dBody = document.body,<br /> dDoc = document.documentElement,<br /> ie = $.browser.msie;<br /> ie&&($.browser.version=="6.0")<br /> &&document.execCommand("BackgroundImageCache", false, true);<br /> var clip = function(options){<br /> this.init.call(this,options);<br /> }<br /> clip.prototype = {<br /> options :{<br /> moveCallBack : function(){},<br /> blockClass : "block",<br /> tipsClass : "tips"<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.blockClass+'">\<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.tips = $('<span class="'+this.tipsClass+'" />').appendTo(this.container[0]);<br /> this.setImg();<br /> },<br /> setImg : function(){<br /> var block = this.block;<br /> var left = block.css("left"),<br /> top = block.css("top"),<br /> height = block.height(),<br /> width = block.width();<br /> this.imgC.css({<br /> height: height,<br /> width : width,<br /> "background-position" : "-"+left+" -"+top<br /> });<br /> this.tips.html("left:<span>"+parseInt(left) + "</span>top:<span>" + +parseInt(top) + "</span>width:<span>"+width+ "</span>height:<span>"+height+"</span>");<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 /> ie<br /> &&this.block[0].setCapture();<br /> this.tips.show();<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 /> ie<br /> &&this.block[0].releaseCapture();<br /> this.tips.hide();<br /> },<br /> move : function(e,isMove){<br /> window.getSelection<br /> ? window.getSelection().removeAllRanges()<br /> : document.selection.empty();</p> <p> 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 /> }</p> <p> this.setImg();<br /> this.moveCallBack();<br /> },<br /> down : function(e){<br /> var blockOriginal = this.blockOriginal,<br /> sTop = Math.max(dBody.scrollTop,dDoc.scrollTop), //出现垂直方向滚动条时候 要计算这个<br /> offset = this.offset;</p> <p> 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 /> 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 /> 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.height<=blockOriginal.top-sTop){<br /> var 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); </p> <p> }else{<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 /> },<br /> left : function(e){<br /> var blockOriginal = this.blockOriginal,<br /> offset = this.offset;</p> <p> if(e.clientX - offset.left - blockOriginal.width - blockOriginal.left<=0){<br /> 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),<br /> left = blockOriginal.left + blockOriginal.width;<br /> }<br /> return {left : left, width : width};<br /> },<br /> right : function(e){<br /> var blockOriginal = this.blockOriginal,<br /> offset = this.offset;</p> <p> 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,blockOriginal.left),<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 /> }</p> <p> $.fn.clip = function(options){<br /> options.container = this;<br /> return new clip(options);<br /> }<br /> })();<br /> xx = $("#container").clip({<br /> imgC : $("#imgC")<br /> })<br /> </script><br /> </body><br /> </html><br />
抱歉!评论已关闭.