模拟电子签章盖章效果的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>

　　</head>

　　<body>

　　var a =$("#test").zSign({ img: '1.gif'});

　　</script>

　　</body>

　　</html>

教程首页更多教程