jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
本文实例讲述了jQuery实现的指纹扫描效果。分享给大家供大家参考，具体如下：
运行效果截图如下：
点击此处查看在线演示效果。
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>demo</title>
<style type="text/css">
body {
background:black;
}
.dialog {
width:300px; height:300px; position:fixed; left:50%; margin-left:-150px; border:2px dashed green;
top:50px;
}
.dialog .shape {
background:black; width:300px; height:300px; z-index:1;
}
.dialog .eye {
width:200px; height:200px; position:absolute; left:50px; top:50px;
z-index:2;
}
#container {
position:relative;
}
.line {
position:absolute; left:0px; top:0px; font-size:0px; z-index:10;
background:green;
}
.btnGroup {
text-align:center;
}
.btnGroup button {
width:50px; height:40px;
}
.dialog.output {
top:400px; display:none;
}
#power {
border:1px solid green; position:fixed; right:20px; bottom:20px;
color:green; line-height:50px; font-size:30px;
}
.title {
line-height:50px; font-size:25px; color:#8F8383; text-shadow:0px 0px 3px green;
text-align:center;
}
</style>
</head>
<body>
<div class="dialog">
<div id="container">
<div class="shape"></div>
<img src="finger.png" class="eye" />
</div>
<div class="btnGroup">
<button id="vSee">竖向扫描</button>
<button id="hSee">横向扫描</button>
<button id="bSee">双向扫描</button>
<button id="dSee">深度扫描</button>
</div>
</div>
<div class="dialog output" id="outputContainer">
<img src="finger.png" class="eye" />
</div>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var container = $("#container");
var outputContainer = $("#outputContainer");
function Line(type) {
var self = this;
self.type = type || "V";
var body = $("<div class='line'></div>");
switch(this.type) {
case "V": // 竖直
body.css({
"width": "1px",
"height": "300px"
});
break;
case "H": // 水平
body.css({
"width": "300px",
"height": "1px"
});
break;
}
container.append(body);
self.body = body;
self.direct = self.type === "V" ? "R" : "B";
self.run = function() {
switch(self.direct) {
case "L":
self.body.animate({"left":0}, 1000, null, function() {
self.direct = "R";
self.run();
});
break;
case "R":
self.body.animate({"left":300}, 1000, null, function() {
self.direct = "L";
self.run();
});
break;
case "T":
self.body.animate({"top":0}, 1000, null, function() {
self.direct = "B";
self.run();
});
break;
case "B":
self.body.animate({"top":300}, 1000, null, function() {
self.direct = "T";
self.run();
});
break;
}
}
self.run();
}
var lineArray = [];
function output(type, time, opactiy) {
time = time || 2000;
var initHeight = type === "H" ? 0 : 300;
var initWidth = type === "H" ? 300 : 0;
type === "B" && (initHeight = initWidth = 0);
outputContainer.css({
"height": initHeight,
"width": initWidth,
"display": "block",
"opacity": opactiy || 1
});
outputContainer.animate({"height":300, "width":300}, time, null);
}
function clear() {
for(var i=0, len=lineArray.length; i<len; i++) {
var line = lineArray[i];
line.body.stop().remove();
}
container.find(".line").remove();
outputContainer.stop().css({"display": "none", "opacity": 0});
}
$("#hSee").click(function() {
clear();
lineArray.push(new Line("H"));
output("H", null, 0.5);
});
$("#vSee").click(function() {
clear();
lineArray.push(new Line("V"));
output("V", null, 0.5);
});
$("#bSee").click(function() {
clear();
lineArray.push(new Line("H"), new Line("V"));
output("B", 3500, 0.8);
});
$("#dSee").click(function() {
clear();
for(var i=0; i<5; i++) {
(function(index) {
setTimeout(function() {
lineArray.push(new Line("H"), new Line("V"));
}, index*200);
})(i);
}
output("B", 5000, 1.0);
});
</script>
</html>
完整实例代码点击此处本站下载。
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
使用TCP/IP协议栈指纹进行远程操作系统辨识
概述 本文讨论了如何查询一台主机的TCP/IP协议栈来收集宝贵的信息.首先,我列举了栈指纹之外的几种"经典的"操作系统辨识方法.然后我描述了栈指纹工具的"工艺现状".接下来说明让远程主机泄漏其信息的一些技术.最后详述了我的实现(nmap),和用它获得的一些流行网站的操作系统信息.理由热点网络 我认为辨识一个系统所运行OS的用处是相当显而易见的,所以这一节会很短.最有力的例子之一是许多安全漏洞是OS相关的.试想你正在作突破试验并发现53端口是打开的.如果那是易遭攻击的
-
浅析IOS开发TouchID指纹解锁功能
效果图如下 实现过程 1.首先引入指纹解锁必须的头文件 #import <LocalAuthentication/LocalAuthentication.h> 2.了解下主要的两个方法 这个方法是判断设备是否支持TouchID的. - (BOOL)canEvaluatePolicy:(LAPolicy)policy error:(NSError * __autoreleasing *)error __attribute__((swift_error(none))); 这个是用来验证TouchI
-
Android中的指纹识别demo开发实例
指纹识别是在Android 6.0之后新增的功能,因此在使用的时候需要先判断用户手机的系统版本是否支持指纹识别.另外,实际开发场景中,使用指纹的主要场景有两种: 纯本地使用.即用户在本地完成指纹识别后,不需要将指纹的相关信息给后台. 与后台交互.用户在本地完成指纹识别后,需要将指纹相关的信息传给后台. 由于使用指纹识别功能需要一个加密对象(CryptoObject)该对象一般是由对称加密或者非对称加密获得.上述两种开发场景的实现大同小异,主要区别在于加密过程中密钥的创建和使用,一般来说,纯本地的
-
Android 指纹识别详解及实现方法
最近项目需要使用到指纹识别的功能,查阅了相关资料后,整理成此文. 指纹识别是在Android 6.0之后新增的功能,因此在使用的时候需要先判断用户手机的系统版本是否支持指纹识别.另外,实际开发场景中,使用指纹的主要场景有两种: 纯本地使用.即用户在本地完成指纹识别后,不需要将指纹的相关信息给后台. 与后台交互.用户在本地完成指纹识别后,需要将指纹相关的信息传给后台. 由于使用指纹识别功能需要一个加密对象(CryptoObject)该对象一般是由对称加密或者非对称加密获得.上述两种开发场景的实现大
-
Android 6.0指纹识别App开发案例
在android 6.0中google终于给android系统加上了指纹识别的支持,这个功能在iPhone上早就已经实现了,并且在很多厂商的定制的ROM中也都自己内部实现这个功能了,这个功能来的有点晚啊.在google全新发布的nexus设备:nexus 5x和nexus 6p中都携带了一颗指纹识别芯片在设备的背面,如下图(图片来自网络): 笔者手中的设备就是图上的那台黑色的nexus 5x,话说这台机器很是好看呢!手感超棒! 废话不多说,下面我出一个指纹识别的demo app,并且详细说明怎么
-
Android指纹识别API初试
在android6.0之后谷歌对指纹识别进行了官方支持,今天还在放假,所以就随意尝试了一下这个api,但是遇到了各种各样的问题 ①在使用FingerPrintManager这个类实现的时候发现了很多问题,这个类里面的一些函数是被hide了的,也就是我们不能调用,比如enroll(),也就是说,当前的官方支持其实是有限的,我们能读取到本机已经存在的指纹(用于解锁的),然后验证这些指纹,但是不能让用户在app使用的时候录入一个指纹,用于app的其他功能,这个是一个缺陷吧目前来说,下面的图也是展示了
-
Android获取apk签名指纹的md5值(防止重新被打包)的实现方法
本文实例讲述了Android获取apk签名指纹的md5值以防止重新被打包的实现方法.分享给大家供大家参考,具体如下: 做个记录(这里只是Java层的签名校验,java层容易被破解,我建议apk加固下) 获取md5值来进行Apk签名校验, 可以防止apk重新被打包. 下面我说说怎么获取apk签名的md5值(有三种方法) 1.用代码获取签名指纹的md5值 /** * MD5加密 * @param byteStr 需要加密的内容 * @return 返回 byteStr的md5值 */ public
-
使用Swift代码实现iOS手势解锁、指纹解锁实例详解
一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB
-
android 指纹识别调用实现方法及示例代码
activity_main.xml源码 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="
-
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
本文实例讲述了jQuery实现的指纹扫描效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>demo</title> <style type="text/css"> body { background:blac
-
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
本文实例讲述了jQuery头像裁剪工具jcrop用法.分享给大家供大家参考,具体如下: 头像裁剪工具目前比较流行的是flash和jquery的.个人觉得用jquery的比较好,因为代码仔细研究一下,基本上能明白怎么回事,想改的话也比较容易. 有一个例子,请参考:jcrop例子demo ,是根jcrop的例子改的,添加以下二个特点: 1,居中显示,并且可拖拉,改变截取的大小 2,预览的图片,根拖拉的大小成比例. 以下是js代码,作了简单的封装 <!DOCTYPE html PUBLIC "-
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
本文实例讲述了jQuery实现的动态文字变化输出效果.分享给大家供大家参考,具体如下: 演示效果图如下: 1.完整实例代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Typ
-
jQuery模拟物体自由落体运动(附演示与demo源码下载)
本文实例讲述了jQuery模拟物体自由落体运动的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
本文实例讲述了js+flash实现的5图变换效果广告代码.分享给大家供大家参考,具体如下: 这是一款类似淘宝图片广告的js+flash广告代码.非常美观实用! 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
-
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
本文实例讲述了jQuery实现的给图片点赞+1动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&
-
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改文字大小功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontS
-
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat
-
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能.分享给大家供大家参考,具体如下: 1.效果展示 2.操作步骤: ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3.关键代码 index.wxml文件: <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type=