老规矩，上图看效果：
可以内嵌在各种容器中，已包装成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 = $(盖 章关 闭
).appendto(_parent);
var _html = 确定删除
;
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 x = x > range.maxx ? range.maxx : x;
y = 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]
复制代码 代码如下:
测试