jQuery仿电子印章在线制作代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery仿电子印章在线制作代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿电子印章在线制作代码</title>
<link href="jquery.zsign.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.zsign.js" type="text/javascript"></script>
</head>
<body>
<div id="test" style="width:595px;height:418px;border:1px solid red;margin:40px auto; position:relative;"><img src="images/asd233234.png" /></div>
<script>
var a =$("#test").zSign({ img: 'images/1.gif'});
</script>
</body>
</html>

JS代码(jquery.zsign.js):

/* 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代码(jquery.zsign.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;

附件:下载该文件资源,减少时间成本(增值服务)