模擬電子簽名蓋章效果的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) {
  '.  >        var sign = $(_html).appendTo(_parent);
        $('.ok', sign).click(function (         sign.addClass('ok ').off('mousedown').find('.btn').remove();
            _add.removeAttr('已停用');                 _s. callBack .call(this, { img: _s.img, top: parseInt(sign.css('top')), left: parseInt(sign.css('left')) });
       } );
        $('.del', sign).click(function () {
                      _add.removeAttr('disabled') ;
        });

        // 綁定移動事件
      sign.data('x', e.clientX) ;
            sign.data('y', e.clientY);
           ('mousemove', function (e1) {
var x = e1.clientX-sign.data('x')position.left;
                var y = ecli  x = x                 x = x >範圍.maxX ?範圍.maxX : x;
  🎜>                y = y >範圍.maxY ?範圍.maxY : y;

                sign.css({ 左: x, 上: y 🎜> $(this).off('mousemove').off('mouseup');
           });
       _btnPanel).click(function () {
        var r = true;
        if (_add.go ("未確定的蓋章將被取消，確定要關閉嗎？ ")) {
                r = false;
           🎜>            //移除未確定位置的蓋章
            $('.sign:not( .ok)', _parent).remove();
            _btnPanel.remove();
     ); s]




複製程式碼


程式碼如下：

.zsign .panel
{
    位置：絕對;
    上：8px;
    右：8px
    顯示：內聯塊；
    內邊距：4px 10px 4px;
    邊距底部：0;
    字體大小：13p1顏色： #333；
    文字對齊：居中；
    文字陰影: 0 1px 1px rgba(255, 255, 255, 0.75);
  >    背景影像：-webkit-gradient(線性, 0 0, 0 100%, from(white), to(#E6E6E6));
    背景重複：重複x
   , 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    邊框：1px 實線#CCC
    邊框：1px 實線#3；
 -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:懸停
{
    顏色：#333;
  背景顏色：#E6E6E6;
    背景位置：0 -15px;
    -webkit-transition：背景位置0.1s線性；
}
.zsign .btn[已停用]
    光標：默認；
    背景圖像：無；
    背景顏色：#E6E6E6；
    不透明度：0.65；
    過濾器：alpha(opacity=65);
    -webkit- box-shadow：無；
    -moz-box-shadow：無；
    box-shadow：無；
}
.zsign .cursor
{
}
.zsign .cursor
{
}
.zsign .cursor
{
}
.zsign .cursor
{
}
.zsign 
{
 ； 🎜>}
.zsign .show
{
    顯示：區塊；
}
.zsign .hide
{
    顯示：無；
.zsign .sign
{
    位置：絕對；
    遊標：移動；
    邊框：1px 虛線#ccc； webkit-box；
    -webkit-box-pack：中心；
    -webkit-box-align：中心；
}
.zsign .sign.ok
{
    光標：預設；
    邊框顏色：透明；
}
.zsign .sign img
{
    高度：100%；
   >.zsign .sign .btn
{
    內邊距：2px 6px；
    字體大小：11px;
    高：14px； >
.zsign .sign .btn.del
{
    底部：4px;
    右：4px;
}
.zsign .sign .btn.ok> 🎜>    底部：4px；
    右：50px；
 }
 


[html]




複製程式碼

程式碼如下：

!DOCTYPE html>             ;     ; 頭>

   

    ;
        var a =$("#test").zSign({ img: '1.gif'});
    腳本>
身體>