Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2016-05-16 17:31:41
Original
1885 people have browsed it

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

老规矩,上图看效果:

模拟电子签章盖章效果的jQuery插件源码_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 = $("
").appendTo(_parent);
    var _html = "
模拟电子签章盖章效果的jQuery插件源码_jquery
";

 
    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                 x = x > range.maxX ? range.maxX : x;
                y = 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]

复制代码 代码如下:




    测试
   
   
   


   


    <script> <BR> var a =$("#test").zSign({ img: '1.gif'}); <BR> </script>


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template