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

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

老规矩，上图看效果：

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

[javascript]


代码如下:

/*
    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();
        }
    });
};

[css]


代码如下:

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


代码如下:

<!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>