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>
JS框架_(Esign.js)仿信用卡电子签名特效的更多相关文章
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(Laydate.js)简单实现日期日历
百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
- JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
随机推荐
- Java 父类的static成员在子类中的继承情况
父类的static成员在子类中的继承状况是怎么样的呢? 昨天突然想到这个问题,刚才试验了一下,发现很容易解释,没什么值得探讨的. 首先在学习继承时,书本都没有强调static成员有什么特殊的地方. 然 ...
- 分布式的几件小事（二）dubbo的工作原理
1.dubbo的工作原理 ①整体设计 图例说明: 图中左边淡蓝背景的为服务消费方使用的接口,右边淡绿色背景的为服务提供方使用的接口,位于中轴线上的为双方都用到的接口. 图中从下至上分为十层,各层均为单 ...
- JVM--对象访问和OutOfMemoryError异常
对象访问: 使用句柄访问方式: 使用直接指针访问方式: OutOfMemoryError异常: 设置堆的最小最大容量:-Xms20m -Xmx20m 设置一样推不可自动扩展. 设置出现内存溢出 ...
- ios 动画：底部标签栏的概念设计
本文汇集了大量优秀的ios底部标签栏动效设计,并附上技术实现的指南,对于设计师和开发者都提供了很好的灵感来源和学习资源. 我们每天都见到tab bars,它们指引用户,使得他们能够快速在不同的tab中 ...
- commons Collections4 MultiMap
MultiMap<String, Integer> multiMap = new MultiValueMap<>(); multiMap.put("A", ...
- scrapy常用设置和注意点！！！！
setting里的设置 HTTPERROR_ALLOWED_CODES = [405] //这一条是忽略405错误退出进程,有可能跳到405页面,在parse注意判断,重新请求页面 爬虫里的设置 ...
- Raspbian 2019-06-20 发布
有关新Raspbian的信息是作为今天博客文章的一部分提供的,该帖子宣布了全新的Raspberry Pi 4: 为了支持Raspberry Pi 4,我们发布了一个全新的操作系统,基于即将发布的Deb ...
- kubernetes创建资源的两种方式
一.创建方式分类: 命令 vs 配置文件 Kubernetes 支持两种方式创建资源: 1.用 kubectl 命令行的方式直接创建,比如: kubectl run httpd-app --image ...
- 2017 ICPC 乌鲁木齐
H:题目看错 背锅 #include <bits/stdc++.h> #include <vector> #define PI acos(-1.0) #define mem(a ...
- noi.ac NA531 【神树和物品】
今日成就:本来以为过了这题,然后被mcfx发现写假并针对地造了一组hack数据之后FST了. 复杂度什么的咱也不会证,咱也不会卡,被hack之后只能FST. 是个决策单调性sb题,但是由于太菜不怎么会 ...