<!DOCTYPE html>
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>clip</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;}
#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; ;}
.tips span{ display:inline-block;zoom:1; width:28px;}
.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);}
.code {
background: none repeat scroll 0 0 #E3F4F9;
border: 1px solid #BAE2F0;
font: 12px "Courier New",Courier,monospace;
margin: 30px auto;
padding: 10px 10px 40px;
width:980px;
}
.code p{ height:24px; line-height:24px;}
.code span{ display:inline-block;zoom:1; margin-right:5px; width:85px; font-weight:bold; color:#00F}
</style>
</head>
<body>
<div class="code">
<div class="how">Usage method</div>
<p>$("#container").clip({
imgC : $("#imgC"),
blockClass : "block",
tipsClass : "tips"
});</p>
<p><span>imgC :</span> A container that represents the cropped image, that is, the picture on the right</p>
<p><span>blockClass :</span> block's style name, that is, the style of the slider that can be dragged on the page, because I am afraid that the style on other pages is duplicated. The default is block</p>
<p><span>tipsClass :</span> The style name of tips That is, the style name of the span that displays left width height top on the page. The default is tips</p>
</div>
<ul>
<li>
<div ></div>
</li>
<li>
<div ></div>
</li>
</ul>
<script type="text/javascript" src="/script/">>
<script type="text/javascript">
(function(){
var dBody = ,
dDoc = ,
ie = $.;
ie&&($.=="6.0")
&&("BackgroundImageCache", false, true);
var clip = function(options){
(this,options);
}
= {
options :{
moveCallBack : function(){},
blockClass : "block",
tipsClass : "tips"
},
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]);
= $('<span class="'++'" />').appendTo([0]);
();
},
setImg : function(){
var block = ;
var left = ("left"),
top = ("top"),
height = (),
width = ();
({
height: height,
width : width,
"background-position" : "-"+left+" -"+top
});
("left:<span>"+parseInt(left) + "</span>top:<span>" + +parseInt(top) + "</span>width:<span>"+width+ "</span>height:<span>"+height+"</span>");
},
start : function(e){
var $elem = $(),
block = ,
self = this,
move = false,
container = ,
action = $("action");
//This Every time I have to calculate the 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;
}
ie
&&[0].setCapture();
();
$(document)
.bind("",function(e){(e,move)})
.bind("",function(){()});
},
end : function(){
$(document)
.unbind("")
.unbind("");
ie
&&[0].releaseCapture();
();
},
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);
}
})();
xx = $("#container").clip({
imgC : $("#imgC")
})
</script>
</body>
</html>