百度云盘　　传送门　　密码：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)仿信用卡电子签名特效的更多相关文章

  1. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  2. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  3. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  4. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  5. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  6. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  7. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  8. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  9. JS框架_(JQuery.js)夜晚天空满天星星闪烁动画

    百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...

随机推荐

  1. VMware Ubuntu18.04 安装及配置笔记

    安装Ubuntu 下载虚拟机VMware 下载镜像Ubuntu 过程略, 参考 https://zhuanlan.zhihu.com/p/38797088 Ubuntu配置 特别提示: 在Ubuntu ...

  2. 十大经典排序算法(Python,Java实现)

    参照:https://www.cnblogs.com/wuxinyan/p/8615127.html https://www.cnblogs.com/onepixel/articles/7674659 ...

  3. IDEA + SpringBoot + maven 项目文件说明

    Springboot + maven + IDEA + git 项目文件介绍 1..gitignore  分布式版本控制系统git的配置文件,意思为忽略提交 在 .gitingore 文件中,遵循相应 ...

  4. TensorFlow入门——MNIST深入

    #load MNIST data import tensorflow.examples.tutorials.mnist.input_data as input_data mnist = input_d ...

  5. charles 安装使用教程及弱网设置

    1.安装jdk环境 2.下载charles 3.打开直接使用 4.手机端安装相关证书 5.手机端网络设置代理 6.分析查看数据 点击sequane中的值查看app中的数据返回与请求值.   charl ...

  6. Jenkins+GitHub 项目环境搭建和发布脚本（二）

    Jenkins+gitHub项目搭建配置 项目发布脚本 profilesScript.sh (支持不同环境配置文件) #!/bin/bash ACTIVE=$ JENKINS_PATH=/var/li ...

  7. 第01章 部署虚拟环境安装Linux系统

    在VMware中安装RHEL系统和其它Linux系统一样,注意的是: ……前边一直操作下边的步骤后: 重启系统后将看到系统的初始化界面,单击 LICENSE INFORMATION 选项. 选中 I ...

  8. lsusb查看usb设备

    root@ubuntu:/home/lyd/work/code/cyusb# lsusb Bus 001 Device 009: ID 04b4:00f1 Cypress Semiconductor ...

  9. maven项目引入外部jar包

    方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud</groupId> <!--自定义--& ...

  10. linux下编译安装SDL2和ffmpeg

    首先安装sudo apt-get install libsdl2-dev ./configure --prefix=/tools/SDL2 make && make install $ ...