<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Resize</title>
<style type="text/css">
*{ padding:0; margin:0;}
ul{ list-style-type:none; overflow:hidden; zoom:1; width:1000px; margin:30px auto; }
li{ float:left; width:500px;}
#container{width:480px; height:480px; margin:0 auto; border:1px solid #999; position:relative;background:url(/cnblogs_com/wtcsy/192373/r_xx.jpg);}
#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;}
.rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown{
position:absolute;background:#f00;width:6px;height:6px;z-index:5;font-size:0;}
.rLeftDown,.rRightUp{cursor:ne-resize;}
.rRightDown,.rLeftUp{cursor:nw-resize;}
.rRight,.rLeft{cursor:e-resize;}
.rUp,.rDown{cursor:n-resize;}
.rRightDown{ bottom:-3px; right:-3px;}
.rLeftDown{ bottom:-3px; left:-3px;}
.rRightUp{ top:-3px; right:-3px;}
.rLeftUp{ top:-3px; left:-3px;}
.rRight{ right:-3px; top:50%}
.rLeft{ left:-3px; top:50%}
.rUp{ top:-3px; left:50%}
.rDown{ bottom:-3px; left:50%}
#imgC{ border:1px solid #CCC; width:0; height:0; margin:0 auto;background:url(/cnblogs_com/wtcsy/192373/r_xx.jpg);}
</style>
</head>
<body>
<ul>
<li>
<div ></div>
</li>
<li>
<div ></div>
</li>
</ul>
<script type="text/javascript" src="/script/"></script>
<script type="text/javascript">
(function(){
var dBody = ,
dDoc = ;
var clip = function(options){
(this,options);
}
= {
options :{
moveCallBack : function(){},
className : "block"
},
init : function(options){
$.extend(this,,options||{});
if(! || !){
return;
}
= $();
var self = this;
= $('<div class="'++'">\
<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("",function(e){(e)})
.appendTo([0]);
();
},
setImg : function(){
var block = ;
({
height: (),
width : (),
"background-position" : "-"+("left")+" -"+("top")
});
},
start : function(e){
var $elem = $(),
block = ,
self = this,
move = false,
container = ,
action = $("action");
//This is a calculation that changes in the basic dom structure and the browser zoom will change the values inside.
= $.extend({height:(),width:()},());
= {height:(),width:(),left:parseInt(("left")),top:parseInt(("top"))};
if(action){
= this[action];
}else{
= - - ;
= - - ;
move = true;
}
$(document)
.bind("",function(e){(e,move)})
.bind("",function(){()});
},
end : function(){
$(document)
.unbind("")
.unbind("");
},
move : function(e,isMove){
? ().removeAllRanges()
: ();
var block = ;
if(isMove){
var left = (0, - - );
left = (left, - );
var top = (0, - - );
top = (top, - );
({left:left,top:top});
}else{
var offset = (e);
(offset);
}
();
();
},
down : function(e){
var blockOriginal = ,
sTop = (,), //When a vertical scroll bar appears, you need to calculate this
offset = ;
if(>=-sTop){
var height = ( - ,+sTop),
top = ;
}else{
var height = (+-sTop,),
top = ( - +sTop,0);
}
return {height:height, top:top};
},
up : function(e){
var blockOriginal = ,
sTop = (,),
offset = ;
if(<=-sTop){
var top = (+sTop,0),
maxHeight = + ,
height = (maxHeight, + -()-sTop);
}else{
var height = (+sTop,),
top = +;
}
return {height:height, top:top};
},
left : function(e){
var blockOriginal = ,
offset = ;
if( - - - <=0){
var left = ( - ,0),
width = ( + , + -());
}else{
var width = (,),
left = + ;
}
return {left : left, width : width};
},
right : function(e){
var blockOriginal = ,
offset = ;
if(>=){
var width = ( - , - - ),
left = ;
}else{
var width = ( + - ,),
left = ( - ,0);
}
return {left : left, width : width};
},
rightDown : function(e){
return $.extend((e),(e));
},
leftDown : function(e){
return $.extend((e),(e));
},
rightUp : function(e){
return $.extend((e),(e));
},
leftUp : function(e){
return $.extend((e),(e));
},
getValue : function(){
var block = ;
return {
left : parseInt(("left")),
top : parseInt(("top")),
width : (),
height : ()
}
}
}
$. = function(options){
= this;
return new clip(options);
}
})();
$("#container").clip({
imgC : $("#imgC")
})
</script>
</body>
</html>