JQuery plug-in for simulating the effect of electronic signatures and seals

The jQuery plug-in source code that simulates the effect of electronic signatures and seals. If you need jQuery plug-ins, you can refer to the customer's requirement. You need to stamp the approved documents with the official seal. If you find any plug-in available on the internet, do it yourself

Old rules, see results:

It can be embedded in various containers and packaged into jQuery plug-ins for convenient calling. Click "Stamp" to add a new Chapter. You can drag the position freely. Click "OK" to save and trigger the callback function for easy processing and storage. You can download it as needed.

[Javascript]

The Code is as follows:

/*
Desc: jQuery simulated stamp
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, // deduct 2 padding = 8px and 2 border 1px
MaxY: _ parent. height ()-_ s. height-_ s. offset-18
};

Var _ btnPanel = $ ("

StampClose

"). AppendTo (_ parent );
Var _ html ="

OKDelete

";


Var _ add = $ ('. add', _ btnPanel). click (function (e ){
_ Add. attr ('Disabled ', 'Disabled ');
Var sign = $ (_ html). appendTo (_ parent );
$ ('. OK', sign). click (function (){
// Confirm stamp
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 ');
});

// Bind a mobile event
Sign. on ('mouseunder', 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 ("uncertain stamp will be canceled. Are you sure you want to close it? ")){
R = false;
}
}
If (r ){
// Delete the stamp of the undetermined position
$ ('. Sign: not (. OK)', _ parent). remove ();
_ BtnPanel. remove ();
}
});
};

[Css]

The Code is 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.1 s 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]

The Code is as follows:

Test