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> ...
随机推荐
- C++ 标准库字符串类使用
标准库中的字符串类 C++语言直接支持C语言所有概念. C++中没有原生的字符串类型. 由于C++中没有原生的字符串类型,C++标准库提供了string类型. 1.string 直接支持字符串链接 2 ...
- 第一章 T-SQL查询和编程基础 T-SQL语言基础(1)
T-SQL查询和编程基础(1) 1.1 理论背景 SQL是为查询和管理关系型数据库管理系统(RDBMS)中的数据而专门设计的一种标准语言. RDBMS是一种基于关系模型的数据库管理系统,关系模型则是一 ...
- QT多线程同步之QWaitcondition
使用到多线程,无可避免的会遇到同步问题,qt提供几种同步线程的方法,在这里讲一下QWaitcondition的简单使用. 一.QWaitcondition,是通过一个线程达到某种条件来唤起另一个线程来 ...
- mysql总结1
修改表名:alter table table_name rename new_table_name; 添加字段:alter table table_name add column_name type_ ...
- 关于Java中线程取值并返回的方法
如何让一个线程不断跑起来,并且在取到值的时候能返回值而线程能继续跑呢? 我们都知道可以用Callable接口获得线程的返回值,或者触发事件监听来操作返回值,下面我将介绍另一种方法. public ab ...
- 08Response
1.功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name ...
- php中限制ip段访问、禁止ip提交表单的代码
在需要禁止访问或提交表单的页面添加下面的代码进行判断就可以了. 注意:下边只是一个PHP限制IP的实例代码,如果您打算应用到CMS中,请自行修改. <?php /加IP访问限制 if(geten ...
- 认识配置文件schema.xml（managed-schema）
1.schema文件是在SolrConfig中的架构工厂定义,有两种定义模式: 1.1.默认的托管模式: solr默认使用的就是托管模式.也就是当在solrconfig.xml文件中没有显式声明< ...
- 清北学堂dp图论营游记day2
上午讲数位dp和背包问题. 先讲背包: 完全背包:换了个顺序: 多重背包: 多重背包优化: 这样把每个物品分成这些组,那么把他们转变成不同的物品,就变成了01背包问题: 滑动窗口取最值问题.单调队列优 ...
- 多线程-生产者消费者（synchronized同步）
正解博客:https://blog.csdn.net/u011863767/article/details/59731447 永远在循环(loop)里调用 wait 和 notify,不是在 If 语 ...