Web开发之电子签章

1.在js封装了jquery的扩展方法用来模拟盖章

$.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();
    }
});

};

2.在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;
}
3、在html页面中引用对应的css以及js文件（省略） 如下即可使用

<div id="ceshi" style="width:1000px;height:700px;background-color:rgb(204,204,204)">
</div>
<script>
    $("#ceshi").zSign({ img: '../../../../Content/gaizhang/images/1.gif' });
</script>