百度云盘　　传送门　　密码：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>

JS框架_(Esign.js)仿信用卡电子签名特效的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  3. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  4. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  5. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  6. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  7. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  9. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

  1. RuntimeError: Model class user.models.User doesn't declare an explicit app_label and isn't in an application in INSTALLED_APPS.

    Django 2.x版本迁移数据库报这个错误,user表使用的Django的验证系统 本来就想改一下用户表的表名,莫名的报了个这个错误,在网上找到了解决办法 打开user应用模块下的apps.py文件 ...

  2. Vue的响应系统

    随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现.Vue 最巧妙的特性之一是其响应式系统,而我们也能够在仓库的 packages/reactivity 模块下找到对应的实 ...

  3. Django基础之模型层(下)

    聚合查询 关键字:aggregate from django.db.models import Max,Min,Sum,Count,Avg 统计所有书的平均价格 models.Book.objects ...

  4. Linux-1.2关机重启reboot，shutdown

    关机重启:reboot,shutdown reboot 重启操作系统 shutdown -r now 重启,shutdown会给其他用户提示

  5. shell脚本获取的参数

    $# 是传给脚本的参数个数 $0 是脚本本身的名字 $1 是传递给该shell脚本的第一个参数 $2 是传递给该shell脚本的第二个参数 $@ 是传给脚本的所有参数的列表

  6. vs nuget找不到包

    nuget.org https://api.nuget.org/v3/index.json

  7. O014、云计算与OpenStack

    参考https://www.cnblogs.com/CloudMan6/p/5334760.html   云计算 基本概念   所有的新事物都不是突然冒出来的,都有前世和今生.云计算也是IT技术不断发 ...

  8. k8s部分名称解释

    k8s部分名词解释 NameSpace:命名空间 Namespace是对一组资源和对象的抽象集合,比如可以用来将系统内部的对象划分为不同的项目组或用户组.常见的pods, services, repl ...

  9. kubesphere集群节点扩容

    原有的节点是 : master[123] , node[1234] 新加的节点node5 一.修改配置文件hosts.ini [root@master0 ~]# /conf/hosts.ini [al ...

  10. deep_learning_Function_softmax_cross_entropy_with_logits

    [TensorFlow]tf.nn.softmax_cross_entropy_with_logits的用法 [TensorFlow]tf.nn.softmax_cross_entropy_with_ ...