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> ...
随机推荐
- 平面割线平分点（构造）--牛客第三场-- Magic Line
题意: 给你n个点的坐标,让你给出两个点,这两个点的连线可以平分这些点. 思路: 先按y的大小排序,在按x的小排序,再搞一下就行了.如下图: #include <bits/stdc++.h> ...
- # 组合数学-组合数+lacus定理
目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 数论-组合数+lacus定理 组合数计算 为避免爆long long,\(20!\)就达到了long long 的范围,采 ...
- 06: zabbix常见面试题
1.1 zabbix架构 1.zabbix理论 1)Zabbix是一个企业级的.开源的.分布式的监控套件,Zabbix可以监控网络和服务的监控状况. 2)Zabbix利用灵活的告警机制,允许用户对事件 ...
- LCT做题笔记
最近几天打算认真复习LCT,毕竟以前只会板子.正好也可以学点新的用法,这里就用来写做题笔记吧.这个分类比较混乱,主要看感觉,不一定对: 维护森林的LCT 就是最普通,最一般那种的LCT啦.这类题目往往 ...
- @Transactional spring事务回滚相关
还可以设置回滚点,看下面 /** * 用户登录接口 * * * 1明确事务方法前的命名规则 * 2保证事务方法执行的时间尽可能的短,不允许出现循环操作,不允许出现RPC等网络请求操作 * 3不允许所有 ...
- python网络爬虫（5）BeautifulSoup的使用示范
创建并显示原始内容 其中的lxml第三方解释器加快解析速度 import bs4 from bs4 import BeautifulSoup html_str = """ ...
- 第三章 联接查询 T-SQL语言基础
联接查询 sql server 2008支持四种表运算符----JOIN,APPLY,PIVOT,UNPIVOT. JOIN表运算符是ANSI标准,而APPLY,PIVOT,UNPIVOT是T-SQL ...
- 只读字段（readonly）和常量（const）
1.常量 一个包含不能修改的值的变量,通过const关键字定义.只能在声明的同时赋值 2.只读字段 通过readonly关键字定义. 可以在声明的同时赋值. 对于实例字段,在包含字段声明的类的实例构造 ...
- 平时工作使用到的idea快捷键或者技巧
平时工作使用到的idea快捷键或者技巧 alt+enter 快速导入包 alt+insert 快速生成setter和getter ctrl+alt+l 格式化代码 /**然后回车 快速生成文档注释 a ...
- NLP采用Bert进行简单文本情感分类
参照当Bert遇上Kerashttps://spaces.ac.cn/archives/6736此示例准确率达到95.5%+ https://github.com/CyberZHG/keras-ber ...