Customers have made a demand, need to be approved in the document stamped with the official seal, online looking for no ready-made, their hands and clothing
The old rules, the above picture looks the effect:
Can be embedded in a variety of containers, has been packaged into jquery plug-ins, easy to invoke. Click the "Seal" button to add a new chapter, you can drag the location, click OK to save and trigger callback function to facilitate the processing of save, there is a need for downloading try.
[JavaScript]
Copy Code code as follows:
/*
Desc:jquery Imitation Seal
Author:hyf
date:2012-11-08
*/
; $.fn.zsign = function (options) {
var _s = $.extend ({
IMG: ',
WIDTH:120,
HEIGHT:120,
Offset:8,//boundary value
Callback:null
}, Options | | {});
var _parent = $ (this). addclass (' zsign ');
var range = {
MinX: _s.offset,
Miny: _s.offset,
MaxX: _parent.width ()-_s.width-_s.offset-18,//Buckle up 2 padding=8px and 2 border 1px
Maxy: _parent.height ()-_s.height-_s.offset-18
};
var _btnpanel = $ ("<div class= ' Panel ' ><button class= ' btn add ' > Seal </button><button class= ' btn Cancel ' > Close </button></div> '). Appendto (_parent);
var _html = "<div class= ' sign ' style= ' height:" + _s.height + "Px;width:" + _s.width + "Px;top:" + _s.offset + "Px;left: "+ _s.offset +" px ' ><button class= ' btn ok ' > OK </button> <button class= ' btn del ' > Delete </button></div> ';
var _add = $ ('. Add ', _btnpanel). Click (function (e) {
_add.attr (' disabled ', ' disabled ');
var sign = $ (_html). Appendto (_parent);
$ ('. Ok ', sign). Click (function () {
Confirm Seal
Sign.addclass (' OK '). Off (' MouseDown '). Find ('. btn '). Remove ();
_add.removeattr (' disabled ');
if (_s.callback) {
_s.callback.call (This, {img: _s.img, Top:parseint (sign.css (' top ')), Left:parseint (Sign.css (' Left '))});
}
});
$ ('. Del ', sign). Click (function () {
Cancel Stamp
Sign.remove ();
_add.removeattr (' disabled ');
});
Binding Move Events
Sign.on (' MouseDown ', function (e) {
Sign.data (' x ', e.clientx);
Sign.data (' y ', e.clienty);
var position = sign.position ();
$ (document). On (' MouseMove ', function (E1) {
var x = e1.clientx-sign.data (' x ') + position.left;
var y = e1.clienty-sign.data (' y ') + position.top;
x = x < Range.minx? range.minx:x;
x = x > Range.maxx? range.maxx:x;
y = y < range.miny? Range.miny:y;
y = y > range.maxy? Range.maxy:y;
Sign.css ({left:x, top:y});
}). On (' MouseUp ', function () {
$ (this). Off (' MouseMove '). Off (' MouseUp ');
});
});
});
$ ('. Cancel ', _btnpanel). Click (function () {
var r = true;
if (_add.attr (' disabled ') = = ' disabled ') {
If!confirm ("The indeterminate seal will be canceled, are you sure you want to close it?") ")) {
R = false;
}
}
if (r) {
Remove the seal of the indeterminate position
$ ('. Sign:not (. ok) ', _parent). Remove ();
_btnpanel.remove ();
}
});
};
[CSS]
Copy Code code as follows:
. zsign. Panel
{
Position:absolute;
top:8px;
right:8px;
}
. zsign. btn
{
Display:inline-block;
padding:4px 10px 4px;
margin-bottom:0;
font-size:13px;
line-height:18px;
Color: #333;
Text-align:center;
text-shadow:0 1px 1px rgba (255, 255, 255, 0.75);
Vertical-align:middle;
Background-color:whitesmoke;
Background-image:-webkit-gradient (linear, 0 0, 0 100%, from (white), to (#E6E6E6));
Background-repeat:repeat-x;
Border-color:rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.1) rgba (0, 0, 0, 0.25);
border:1px solid #CCC;
Border-bottom-color: #B3B3B3;
-webkit-border-radius:4px;
Box-shadow:inset 0 1px 0 rgba (255, 255, 255, 0.2), 0 1px 2px rgba (0, 0, 0, 0.05);
Cursor:pointer;
-webkit-user-select:none;
}
. zsign. Btn:hover
{
Color: #333;
Text-decoration:none;
Background-color: #E6E6E6;
Background-position:0 -15px;
-webkit-transition:background-position 0.1s linear;
}
. zsign. btn[disabled]
{
Cursor:default;
Background-image:none;
Background-color: #E6E6E6;
opacity:0.65;
Filter:alpha (opacity=65);
-webkit-box-shadow:none;
-moz-box-shadow:none;
Box-shadow:none;
}
. zsign. Cursor
{
Cursor:none;
}
. Zsign. Show
{
Display:block;
}
. Zsign. Hide
{
Display:none;
}
. zsign. Sign
{
Position:absolute;
Cursor:move;
border:1px dashed #ccc;
padding:8px;
Display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
. zsign. Sign.ok
{
Cursor:default;
Border-color:transparent;
}
. zsign. Sign img
{
max-height:100%;
max-width:100%;
}
. zsign. Sign. btn
{
PADDING:2PX 6px;
font-size:11px;
line-height:14px;
Position:absolute;
}
. zsign. Sign. Btn.del
{
bottom:4px;
right:4px;
}
. zsign. Sign. Btn.ok
{
bottom:4px;
right:50px;
}
[HTML]
Copy Code code as follows:
<! DOCTYPE html>
<title> Testing </title>
<link href= "Jquery.zsign.css" rel= "stylesheet" type= "Text/css"/>
<script src= "Jquery-1.7.1.min.js" type= "Text/javascript" ></script>
<script src= "Jquery.zsign.js" type= "Text/javascript" ></script>
<body>
<div id= "test" style= "width:800px;height:500px;border:1px solid red;margin:40px Auto; position:relative; " ></div>
<script>
var a =$ ("#test"). Zsign ({img: ' 1.gif '});
</script>
</body>
