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


Posted in Javascript onJune 24, 2013

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

老规矩,上图看效果:

模拟电子签章盖章效果的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>
Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript 精粹笔记
May 09 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
js实现删除li标签一行内容
Apr 16 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
JavaScript实现打砖块游戏
Feb 25 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
Js注册协议倒计时的小例子
Jun 24 #Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 #Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
You might like
PHP获取MAC地址的具体实例
2013/12/13 PHP
ThinkPHP中处理表单中的注意事项
2014/11/22 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
arguments对象
2006/11/20 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
2013/09/22 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
人事档案接收函
2014/01/12 职场文书
大型活动组织方案
2014/05/10 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
遗失说明具结保证书
2015/02/26 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
《火纹风花雪月无双》预告“神秘雇佣兵” 紫发剑客
2022/04/13 其他游戏