JS框架_(Esign.js)仿信用卡电子签名特效

 

 

百度云盘　　传送门　　密码：l60w

 

电子签名特效效果：

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery+HTML5仿信用卡电子签名特效</title>

<link rel="stylesheet" href="css/esignDemo.css">

</head>

<center>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas width="600" height="250" id="canvasEdit"></canvas>
    </div>
</div>

<div class="imgDiv">
    <span id="sign_show"></span>
</div>

<div class="btnDiv">
    <a id="sign_ok" class="okBtn">确认</a>
    <a id="sign_clear" class="clearBtn">清除</a>
</div>
</center>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/esign.js"></script>
<script type="text/javascript">
$(function(){
    //初始化动作，根据DOM的ID不同进行自定义，如果不写则内部默认取这四个
    $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
});
</script>


</body>
</html>
index.html

 

 

实现过程：

 

CSS

 

签名版和样式版

.canvasDiv{
    height: 250px;
    width: 600px;
    border: 1px solid black;
}

.imgDiv{
    height: 50px;
    width: 80px;
    border: 1px solid black;
    margin-top: 15px;
}

border ：简写属性在一个声明设置所有的边框属性

4个参数
border-style:dotted solid double dashed; 
上边框是点状
右边框是实线
下边框是双线
左边框是虚线


3个参数
border-style:dotted solid double;
上边框是点状
右边框和左边框是实线
下边框是双线


2个参数
border-style:dotted solid;
上边框和下边框是点状
右边框和左边框是实线


1个参数
border-style:dotted;
所有 4 个边框都是点状
border-style 属性

 

DOM

 

签名版和样式版和按钮

 

<center>
<div class="canvasDiv">
    <div id="editing_area">
        <canvas width="600" height="250" id="canvasEdit"></canvas>
    </div>
</div>

<div class="imgDiv">
    <span id="sign_show"></span>
</div>

<div class="btnDiv">
    <a id="sign_ok" class="okBtn">确认</a>
    <a id="sign_clear" class="clearBtn">清除</a>
</div>
</center>

 

 

电子签名(esign.js)与按钮进行绑定

<script type="text/javascript">
$(function(){
    //初始化动作，根据DOM的ID不同进行自定义，如果不写则内部默认取这四个
    $().esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
});
</script>

 

posted @ 2018-07-29 20:59  Cynical丶Gary  阅读(2675)  评论(0)  编辑  收藏  举报