模拟电子签章盖章效果的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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JS实现换肤功能的方法实例详解
Jan 30 Javascript
详解jQuery-each()方法
Mar 13 jQuery
Vue自定义多选组件使用详解
Sep 08 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
封装一个PDO数据库操作类代码
2009/09/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python实现马耳可夫链算法实例分析
2015/05/20 Python
python 实时遍历日志文件
2016/04/12 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
django框架创建应用操作示例
2019/09/26 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
优秀信贷员先进事迹
2014/01/31 职场文书
网络教育自我鉴定
2014/02/04 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
国企干部对照检查材料
2014/08/22 职场文书
会议通知范文
2015/04/15 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫