전자 서명 및 seal_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 = "

确定删除

";

 
    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 > 범위.maxX? 범위.maxX : x;
                y = y                 y = y > 범위.maxY ? 범위.maxY : y;

                sign.css({ 왼쪽: x, 위쪽: 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) {     });
};


[css]

复代码

代码如下:

.zsign .panel
{
    위치: 절대;
    상단: 8px;
    오른쪽: 8px;
}
.zsign .btn
{
    디스플레이: 인라인 블록;
    패딩: 4px 10px 4px;
    여백-하단: 0;
    글꼴 크기: 13px;
    줄 높이: 18px;
    색상: #333;
    텍스트 정렬: 가운데;
    텍스트 그림자: 0 1px 1px rgba(255, 255, 255, 0.75);
    수직 정렬: 중간;
    배경색: whiteSmoke;
    배경 이미지: -webkit-gradient(선형, 0 0, 0 100%, from(white), to(#E6E6E6));
    배경 반복: 반복-x;
    테두리 색상: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    테두리: 1px 실선 #CCC;
    테두리 하단 색상: #B3B3B3;
    -webkit-border-radius: 4px;
    상자 그림자: 삽입 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    커서: 포인터;
    -webkit-user-select: 없음;
}
.zsign .btn:hover
{
    색상: #333;
    텍스트 장식: 없음;
    배경색: #E6E6E6;
    배경 위치: 0 -15px;
    -webkit-transition: 배경 위치 0.1초 선형;
}
.zsign .btn[비활성화]
{
    커서: 기본값;
    배경 이미지: 없음;
    배경색: #E6E6E6;
    불투명도: 0.65;
    필터: 알파(불투명도=65);
    -webkit-box-shadow: 없음;
    -moz-box-shadow: 없음;
    상자 그림자: 없음;
}
.zsign .cursor
{
    커서: 없음;
}
.zsign .show
{
    디스플레이: 블록;
}
.zsign .hide
{
    디스플레이: 없음;
}

.zsign .sign
{
    위치: 절대;
    커서: 이동;
    테두리: 1px 점선 #ccc;
    패딩: 8px;
    디스플레이: -webkit-box;
    -webkit-box-pack: 센터;
    -webkit-box-align: 센터;
}
.zsign .sign.ok
{
    커서: 기본값;
    테두리 색상:투명;
}
.zsign .sign img
{
    최대 높이: 100%;
    최대 너비: 100%;
}
.zsign .sign .btn
{
    패딩: 2px 6px;
    글꼴 크기: 11px;
    줄 높이: 14px;
    위치: 절대;
}

.zsign .sign .btn.del
{
    하단: 4px;
    오른쪽: 4px;
}
.zsign .sign .btn.ok
{
    하단: 4px;
    오른쪽: 50px;
 }
 

[html]

复aze代码 代码如下:

   
   
   
   


   

   
        var a =$("#test").zSign({ img: '1.gif'});