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> ...
随机推荐
- 使用Python基于OpenCV和Tesseract的OCR
OCR OCR(Optical Character Recognition,光学字符识别)是指电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗.亮的模式确定其形状,然后用字符识别方法将形 ...
- 剑指offer-数组中重复的数字-数组-python
题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...
- 在Powershell中使用Group-Object和-GroupBy
使用Group-Object(group)按组统计 PS C:\> Get-Command -Module Microsoft.PowerShell.LocalAccounts | group ...
- O024、Nova组件如何协同工作
参考https://www.cnblogs.com/CloudMan6/p/5415836.html Nova 物理部署方案 前面大家已经看到 Nova 由很多子服务组成,我们也知道OpenS ...
- String和StringBuffer的常见用法
链接:https://www.nowcoder.com/questionTerminal/fe6b651b66ae47d7acce78ffdd9a96c7?answerType=1&f=dis ...
- 前端框架：Angular React 和 Vue的比较
前端这几年的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React, ...
- IE浏览器清除缓存及历史浏览数据
IE浏览器清除缓存方法如下: 打开IE浏览器,依次点击"工具-Internet选项-常规-删除",如下图所示, 有的时候发现你明明已经执行了删除,但是实际上还是有缓存数据,一般是因 ...
- 第一篇、Python入门
一 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: #计算机的发明,是为了用机器取代/解放人力,而 ...
- laravel swoole Call to undefined method Illuminate\Events\Dispatcher::fire()
报错: Call to undefined method Illuminate\Events\Dispatcher::fire() Whoops\Run::handleError("Unca ...
- yum 报错3
. Contact the upstream for the repository and get them to fix the problem. . Reconfigure the baseurl ...