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> ...
随机推荐
- PYQT5 pyinstaller 打包工程
win+R 输入cmd 回车 首先安装 pyinstaller : pip install pyinstaller 安装 pywin32: pip install pywin32 在cmd中输入工程 ...
- Buy a Ticket CodeForces - 938D (dijkstra)
大意: n节点无向图, 点$i$到点$j$的花费为$2dis(i,j)+a[j]$, 对于每个点, 求最少花费. 每条边权翻倍, 源点S向所有点$i$连边, 权为$a[i]$, 答案就为$S$到每个点 ...
- python爬虫简介
一.什么是网络爬虫? 网络爬虫,是一种按照一定规则,自动的抓取万维网信息的程序或者脚本. 二.python网络爬虫, 需要用到的第三方包 requests和BeautifulSoup4 pip ins ...
- JSP和JSTL视图解析器
使用JSTL users.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...
- JS基础_强制类型转换-String
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 一款完美代替微信小程序原生客服消息的工具：
一.设置:无需开发,多种回复(自动+人工) 自动回复形式有3种: 打开客服消息(用户只要和客服互动过一次,再次点击进入,会收到设置好的自动回复) 关键词回复(用户在小程序中回复某个关键词内容时,会 ...
- Ubuntu - 14.04下，GO语言的安装！
一,下载GO语言的安装文件,我直接下载GO语言的安装包(64位),并不是源码: 下载地址: 64位:https://storage.googleapis.com/golang/go1.6.linux- ...
- python的加密方式
MD5加密 这是一种使用非常广泛的加密方式,不可逆的,在日常字符串加密中经常会用到,下面我简单介绍一下这种方式,主要用到Python自带的模块hashlib,测试代码如下,先创建一个md5对象,然后直 ...
- 使用docker构建supervisor全步骤
1.使用docker build 命令基于Dockerfile文件进行构建supervisor镜像,命令:docker build -t supervisor镜像名 Dockerfile文件放置的位置 ...
- Spring Cloud,Docker
Spring Cloud 先决条件 Spring cloud 基于spring boot,spring,java Spring Cloud解决的问题 分布式微服务架构和微服务监控.注册于发现.跟踪等一 ...