模拟电子签章盖章效果的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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript Ajax实现异步通信
Dec 14 Javascript
Javascript blur与click冲突解决办法
Jan 09 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
vue的事件绑定与方法详解
Aug 16 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
Node使用Selenium进行前端自动化操作的代码实现
Oct 10 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
python操作MongoDB基础知识
2013/11/01 Python
python求pi的方法
2014/10/08 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python实现图片筛选程序
2018/10/24 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
浅析python 字典嵌套
2020/09/29 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
汽车专业毕业生推荐信
2013/11/12 职场文书
周年庆促销方案
2014/03/15 职场文书
投资合作协议书范本
2014/04/17 职场文书
授权委托书格式范文
2014/08/02 职场文书
公司门卫岗位职责
2015/04/13 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
Python pandas读取CSV文件的注意事项(适合新手)
2021/06/20 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android