模拟电子签章盖章效果的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 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
Vue2.0 $set()的正确使用详解
Jul 28 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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获取后台Job管理的实现代码
2011/06/10 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP session 会话处理函数
2016/06/06 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
JS严格模式知识点总结
2018/02/27 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
九步学会Python装饰器
2015/05/09 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
Cotton On美国网站:澳洲时装连锁品牌
2016/10/25 全球购物
企业门卫岗位职责
2013/12/12 职场文书
暑期实习鉴定
2013/12/16 职场文书
商场拾金不昧表扬信
2014/01/13 职场文书
旷课检讨书500字
2014/10/14 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python