模拟电子签章盖章效果的jQuery插件

客户提了个需求，需要在已审核的文档上加盖公章，网上找了找没有现成的，自己动手丰衣足食

老规矩，上图看效果：

可以内嵌在各种容器中，已包装成jQuery插件，调用方便。点击“盖章”按钮添加一个新章，可以自由拖动位置，点击确定后保存并触发回调函数方便处理保存，有需要的下载试试。

/*    desc:jQuery模拟盖章    author:hyf    date:2012-11-08*/;$.fn.zSign = function (options) {    var _s = $.extend({        img: '',        width: 120,        height: 120,        offset: 8,           //边界值        callBack: null    }, options || {});    var _parent = $(this).addClass('zsign');    var range = {        minX: _s.offset,        minY: _s.offset,        maxX: _parent.width() - _s.width - _s.offset - 18,      //扣去2个padding=8px以及2个边框1px        maxY: _parent.height() - _s.height - _s.offset - 18    };    var _btnPanel = $("<div class='panel'><button class='btn add' >盖 章</button><button class='btn cancel'>关 闭</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'><img src='" + _s.img + "' draggable='false'/><button class='btn ok' >确定</button><button class='btn del' >删除</button></div>";    var _add = $('.add', _btnPanel).click(function (e) {        _add.attr('disabled', 'disabled');        var sign = $(_html).appendTo(_parent);        $('.ok', sign).click(function () {            //确定盖章            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 () {            //取消盖章            sign.remove();            _add.removeAttr('disabled');        });        //绑定移动事件        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("未确定的盖章将被取消，确定要关闭吗？")) {                r = false;            }        }        if (r) {            //删除未确定位置的盖章            $('.sign:not(.ok)', _parent).remove();            _btnPanel.remove();        }    });};

.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;

<!DOCTYPE html><html><head>    <title>测试</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></head><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></html>

1楼xzz1747昨天 17:17

盖印章后怎么保存？n刷新了就没了？n感谢博主！