Now we are using the individual center of each major website, there is a function of uploading personal avatar. After uploading a personal photo, the user may not meet the requirements of the site, so asked the user to cut the photos, the final according to the size of the user cut to generate the avatar. This function is really great, originally do not know JS when, feel very magical, too magical. Thought that day if oneself also can understand this inside of technology, that that many cows ah ~ Everybody is also have what I the same idea ah ~ haha ~ ~
Let's use JavaScript to implement this feature here.
<! DOCTYPE html>
<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 (http:// images.cnblogs.com/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); o pacity: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 (http://images.cnblogs.com/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>
<body>
<div class= "Code" >
<div class= "How" > Usage </div>
<p>$ ("#container"). Clip ({
IMGC: $ ("#imgC"),
Blockclass: "Block",
Tipsclass: "Tips"
});</p>
<P><SPAN>IMGC:</span> represents a container for cropping a picture, which is the picture on the right </p>
The style name of the <p><span>blockclass:</span> block is the style of the slider that can be dragged on the page because of the fear and the same style on the other page the default is block</p>
The style name of <p><span>tipsclass:</span> tips is the style name of the span on the page that shows the left width height top, which defaults to tips</p>
</div>
<ul>
<li>
<div id= "Container" ></div>
</li>
<li>
<div id= "IMGC" ></div>
</li>
</ul>
<script type= "Text/javascript" src= "Http://common.cnblogs.com/script/jquery.js "></script>
<script type= "Text/javascript" >
(function () {
var dbody = document.body,
Ddoc = Document.documentelement,
ie = $.browser.msie;
ie&& ($.browser.version== "6.0")
&&document.execcommand ("Backgroundimagecache", false, true);
var clip = function (options) {
This.init.call (this,options);
}
Clip.prototype = {
Options: {
Movecallback:function () {},
Blockclass: "Block",
Tipsclass: "Tips"
},
Init:function (options) {
$.extend (this,this.options,options| | {});
if (!this.container | |!this.imgc) {
Return
}
This.container = $ (This.container);
var self = this;
This.block = $ (' <div class= "' +this.blockclass+ ') >\
<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 ("MOUSEDOWN.R", function (e) {Self.start (e)})
. Appendto (This.container[0]);
This.tips = $ (' <span class= "' +this.tipsclass+ '"/> '). Appendto (this.container[0));
This.setimg ();
},
Setimg:function () {
var block = This.block;
var left = block.css (' left '),
top = BLOCK.CSS ("Top"),
Height = block.height (),
width = Block.width ();
This.imgC.css ({
Height:height,
Width:width,
"Background-position": "-" +left+ "-" +top
});
This.tips.html ("left:<span>" +parseint (left) + "</span>top:<span>" + +parseint (top) + "</span >width:<span> "+width+" </span>height:<span> "+height+" </span>);
},
Start:function (e) {
var $elem = $ (e.target),
block = This.block,
Self = this,
Move = False,
container = This.container,
Action = $elem. attr ("action");
This is a change to the basic DOM structure every time the zoom of the browser will change the value inside.
This.offset = $.extend ({height:container.height (), Width:container.width ()},container.offset ());
This.blockoriginal = {height:block.height (), Width:block.width (), Left:parseint (Block.css ("left")), Top:parseint ( Block.css ("Top")};
if (action) {
This.fun = This[action];
}else{
This.x = E.clientx-this.offset.left-this.blockoriginal.left;
This.y = E.clienty-this.offset.top-this.blockoriginal.top;
move = true;
}
Ie
&&this.block[0].setcapture ();
This.tips.show ();
$ (document)
. Bind ("MOUSEMOVE.R", function (e) {self.move (E,move)})
. Bind ("MOUSEUP.R", function () {self.end ()});
},
End:function () {
$ (document)
. Unbind ("MOUSEMOVE.R")
. Unbind ("MOUSEUP.R");
Ie
&&this.block[0].releasecapture ();
This.tips.hide ();
},
Move:function (E,ismove) {
Window.getselection
? Window.getselection (). Removeallranges ()
: Document.selection.empty ();
var block = This.block;
if (ismove) {
var left = Math.max (0,e.clientx-this.offset.left-this.x);
left = Math.min (left,this.offset.width-this.blockoriginal.width);
var top = Math.max (0,E.CLIENTY-THIS.OFFSET.TOP-THIS.Y);
top = Math.min (top,this.offset.height-this.blockoriginal.height);
Block.css ({left:left,top:top});
}else{
var offset = This.fun (e);
BLOCK.CSS (offset);
}
This.setimg ();
This.movecallback ();
},
Down:function (e) {
var blockoriginal = this.blockoriginal,
STop = Math.max (dbody.scrolltop,ddoc.scrolltop),//when the vertical scroll bar appears to calculate this
offset = This.offset;
if (e.clienty-offset.top>=blockoriginal.top-stop) {
var height = math.min (offset.height-blockoriginal.top,e.clienty-offset.top-blockoriginal.top+stop),
top = Blockoriginal.top;
}else{
var height = math.min (offset.top+blockoriginal.top-e.clienty-stop,blockoriginal.top),
top = Math.max (e.clienty-offset.top+stop,0);
}
return {height:height, top:top};
},
Up:function (e) {
var blockoriginal = this.blockoriginal,
STop = Math.max (dbody.scrolltop,ddoc.scrolltop),
offset = This.offset;
if (e.clienty-offset.top-blockoriginal.height<=blockoriginal.top-stop) {
var top = Math.max (e.clienty-offset.top+stop,0),
MaxHeight = Blockoriginal.top + Blockoriginal.height,
Height = math.min (maxheight,blockoriginal.top + blockoriginal.height-(e.clienty-offset.top)-sTop);
}else{
var height = math.min (e.clienty-offset.top-blockoriginal.top-blockoriginal.height+stop, Offset.height-blockoriginal.top-blockoriginal.height),
top = blockoriginal.top+blockoriginal.height;
}
return {height:height, top:top};
},
Left:function (e) {
var blockoriginal = this.blockoriginal,
offset = This.offset;
if (e.clientx-offset.left-blockoriginal.width-blockoriginal.left<=0) {
var left = Math.max (e.clientx-offset.left,0),
width = math.min (blockoriginal.left + blockoriginal.width,blockoriginal.left + blockoriginal.width-( E.clientx-offset.left));
}else{
var width = math.min (E.clientx-offset.left-blockoriginal.left-blockoriginal.width, Offset.width-blockoriginal.left-blockoriginal.width),
left = Blockoriginal.left + blockoriginal.width;
}
return {left:left, width:width};
},
Right:function (e) {
var blockoriginal = this.blockoriginal,
offset = This.offset;
if (e.clientx-offset.left>=blockoriginal.left) {
var width = math.min (offset.width-blockoriginal.left,e.clientx-offset.left-blockoriginal.left),
left = Blockoriginal.left;
}else{
var width = math.min (offset.left + blockoriginal.left-e.clientx,blockoriginal.left),
left = Math.max (e.clientx-offset.left,0);
}
return {left:left, width:width};
},
Rightdown:function (e) {
Return $.extend (This.right (E), This.down (e));
},
Leftdown:function (e) {
Return $.extend (This.left (E), This.down (e));
},
Rightup:function (e) {
Return $.extend (This.right (E), This.up (e));
},
Leftup:function (e) {
Return $.extend (This.left (E), This.up (e));
},
Getvalue:function () {
var block = This.block;
return {
Left:parseint (Block.css ("left")),
Top:parseint (Block.css ("Top")),
Width:block.width (),
Height:block.height ()
}
}
}
$.fn.clip = function (options) {
Options.container = this;
return new clip (options);
}
})();
XX = $ ("#container"). Clip ({
IMGC: $ ("#imgC")
})
</script>
</body>
Isn't it cool, little buddy, to learn the idea of this example.
