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

240 阅读 0 评论 159 点赞

我是靠谱客的博主灵巧野狼，最近开发中收集的这篇文章主要介绍模拟电子签章盖章效果的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> 