学php gd库 看到有图片裁剪 正好整一个 嗯 其实挺简单的
php版代码如下:
<!DOCTYPE html>
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>Resize</title>
<style type="text/css">
*{ padding:; margin:;}
ul{ liststyletype:none; overflow:hidden; zoom:; width:px; margin:px auto; }
li{ float:left; width:px;}
#container{width:px; height:px; margin: auto; border:px solid #; position:relative;background:url}
#container block{height:px; width:px; border:px solid #; position:absolute; left:px; top:px; background:#fff;filter:alpha(opacity=);opacity:; cursor:move;}
rRightDownrLeftDownrLeftUprRightUprRightrLeftrUprDown{
position:absolute;background:#f;width:px;height:px;zindex:;fontsize:;}
rLeftDownrRightUp{cursor:neresize;}
rRightDownrLeftUp{cursor:nwresize;}
rRightrLeft{cursor:eresize;}
rUprDown{cursor:nresize;}
rRightDown{ bottom:px; right:px;}
rLeftDown{ bottom:px; left:px;}
rRightUp{ top:px; right:px;}
rLeftUp{ top:px; left:px;}
rRight{ right:px; top:%}
rLeft{ left:px; top:%}
rUp{ top:px; left:%}
rDown{ bottom:px; left:%}
#imgC{ border:px solid #CCC; width:; height:; margin: auto;background:url}
</style>
</head>
<body>
<ul>
<li>
<div id="container"></div>
</li>
<li>
<div id="imgC"></div>
</li>
</ul>
<script type="text/javascript" src="
<script type="text/javascript">
(function(){
var dBody = documentbody
dDoc = documentdocumentElement;
var clip = function(options){
thisinitcall(thisoptions);
}
clipprototype = {
options :{
moveCallBack : function(){}
className : "block"
}
init : function(options){
$extend(thisthisoptionsoptions||{});
if(!thiscontainer || !thisimgC){
return;
}
thiscontainer = $(thiscontainer);
var self = this;
thisblock = $(<div class="+thisclassName+">
<div action="rightDown" class="rRightDown"></div>
<div action="leftDown" class="rLeftDown"></div>
<div action="rightUp" class="rRightUp"></div>
<div action="leftUp" class="rLeftUp"></div>
<div action="right" class="rRight"></div>
<div action="left" class="rLeft"></div>
<div action="up" class="rUp"></div>
<div action="down" class="rDown" ></div>
</div>)
bind("mousedownr"function(e){selfstart(e)})
appendTo(thiscontainer[]);
thissetImg();
}
setImg : function(){
var block = thisblock;
thisimgCcss({
height: blockheight()
width : blockwidth()
"backgroundposition" : ""+blockcss("left")+" "+blockcss("top")
});
}
start : function(e){
var $elem = $(etarget)
block = thisblock
self = this
move = false
container = thiscontainer
action = $elemattr("action");
//这个 每次都要计算 基本dom结构的改变 浏览器的缩放 都会让里面的值发生改变
thisoffset = $extend({height:containerheight()width:containerwidth()}containeroffset());
thisblockOriginal = {height:blockheight()width:blockwidth()left:parseInt(blockcss("left"))top:parseInt(blockcss("top"))};
if(action){
thisfun = this[action];
}else{
thisx = eclientX thisoffsetleft thisblockOriginalleft ;
thisy = eclientY thisoffsettop thisblockOriginaltop;
move = true;
}
$(document)
bind("mousemover"function(e){selfmove(emove)})
bind("mouseupr"function(){selfend()});
}
end : function(){
$(document)
unbind("mousemover")
unbind("mouseupr");
}
move : function(eisMove){
windowgetSelection
? windowgetSelection()removeAllRanges()
: documentselectionempty();
var block = thisblock;
if(isMove){
var left = Mathmax(eclientX thisoffsetleft thisx);
left = Mathmin(leftthisoffsetwidth thisblockOriginalwidth);
var top = Mathmax(eclientY thisoffsettop thisy);
top = Mathmin(topthisoffsetheight thisblockOriginalheight);
blockcss({left:lefttop:top});
}else{
var offset = thisfun(e);
blockcss(offset);
}
thissetImg();
thismoveCallBack();
}
down : function(e){
var blockOriginal = thisblockOriginal
sTop = Mathmax(dBodyscrollTopdDocscrollTop) //出现垂直方向滚动条时候 要计算这个
offset = thisoffset;
if(eclientYoffsettop>=blockOriginaltopsTop){
var height = Mathmin(offsetheight blockOriginaltopeclientYoffsettopblockOriginaltop+sTop)
top = blockOriginaltop;
}else{
var height = Mathmin(offsettop+blockOriginaltopeclientYsTopblockOriginaltop)
top = Mathmax(eclientY offsettop+sTop);
}
return {height:height top:top};
}
up : function(e){
var blockOriginal = thisblockOriginal
sTop = Mathmax(dBodyscrollTopdDocscrollTop)
offset = thisoffset;
if(eclientYoffsettopblockOriginalheight<=blockOriginaltopsTop){
var top = Mathmax(eclientYoffsettop+sTop)
maxHeight = blockOriginaltop + blockOriginalheight
height = Mathmin(maxHeightblockOriginaltop + blockOriginalheight (eclientYoffsettop)sTop);
}else{
var height = Mathmin(eclientYoffsettopblockOriginaltopblockOriginalheight+sTopoffsetheightblockOriginaltopblockOriginalheight)
top = blockOriginaltop+blockOriginalheight;
}
return {height:height top:top};
}
left : function(e){
var blockOriginal = thisblockOriginal
offset = thisoffset;
if(eclientX offsetleft blockOriginalwidth blockOriginalleft<=){
var left = Mathmax(eclientX offsetleft)
width = Mathmin(blockOriginalleft + blockOriginalwidthblockOriginalleft + blockOriginalwidth (eclientXoffsetleft));
}else{
var width = Mathmin(eclientXoffsetleftblockOriginalleftblockOriginalwidthoffsetwidthblockOriginalleftblockOriginalwidth)
left = blockOriginalleft + blockOriginalwidth;
}
return {left : left width : width};
}
right : function(e){
var blockOriginal = thisblockOriginal
offset = thisoffset;
if(eclientXoffsetleft>=blockOriginalleft){
var width = Mathmin(offsetwidth blockOriginallefteclientX offsetleft blockOriginalleft)
left = blockOriginalleft;
}else{
var width = Mathmin(offsetleft + blockOriginalleft eclientXblockOriginalleft)
left = Mathmax(eclientX offsetleft);
}
return {left : left width : width};
}
rightDown : function(e){
return $extend(thisright(e)thisdown(e));
}
leftDown : function(e){
return $extend(thisleft(e)thisdown(e));
}
rightUp : function(e){
return $extend(thisright(e)thisup(e));
}
leftUp : function(e){
return $extend(thisleft(e)thisup(e));
}
getValue : function(){
var block = thisblock;
return {
left : parseInt(blockcss("left"))
top : parseInt(blockcss("top"))
width : blockwidth()
height : blockheight()
}
}
}
$fnclip = function(options){
optionscontainer = this;
return new clip(options);
}
})();
$("#container")clip({
imgC : $("#imgC")
})
</script>
</body>
</html>
