jQuery實現(xiàn)的指紋掃描效果實例(附演示與demo源碼下載)
更新時間：2016年01月26日 09:19:28 作者：m1870164
這篇文章主要介紹了jQuery實現(xiàn)的指紋掃描效果,以完整實例形式分析了jQuery實現(xiàn)圖像按照指定模式顯示的相關實現(xiàn)技巧,并附帶附示例演示與demo源碼供讀者下載參考,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的指紋掃描效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
點擊此處查看在線演示效果。
具體代碼如下：
<!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常見經(jīng)典特效匯總》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jquery實現(xiàn)圖片漸變切換兼容ie6/Chrome/Firefox
jquery代碼實現(xiàn)圖片漸變切換同時兼容ie6、Chrome、Firefox，想學習的朋友可以測試下，希望對大家有所幫助2013-08-08
JQuery FlexiGrid的asp.net完美解決方案 dotNetFlexGrid-.Net原生的異步表格控件
dotNetFlexGrid是一款dotNet原生的異步表格控件，他的前身是Jquery FlexiGrid插件，我們重構了FlexiGrid的大部分Javascript代碼，使其工作的更有效率，BUG更少；同時將其封裝為dotNet控件，提供了簡單易用的使用方式。2010-09-09
這篇文章主要為大家詳細介紹了jquery實現(xiàn)上傳文件進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
jquery ztree實現(xiàn)下拉樹形框使用到了json數(shù)據(jù)
項目需要用到樹形下拉框，采用了zTree來實現(xiàn)，因為代碼的移植性比較高，下面是實現(xiàn)的代碼2014-05-05
這篇文章主要為大家詳細介紹了jQuery初級教程之網(wǎng)站品牌列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本文給大家介紹jquery效果大全之制作電腦健康體檢得分特效，并附有源碼下載，對jquery效果大全感興趣的朋友一起學習吧2015-11-11
這篇文章介紹了JQ獲取動態(tài)加載的圖片大小的正確方法，有需要的朋友可以參考一下2013-11-11
jquery 關于event.target使用的幾點說明介紹
本篇文章介紹了，jquery中關于event.target使用的幾點說明。需要的朋友參考下2013-04-04
這篇文章主要介紹了jQuery實現(xiàn)點擊小圖顯示大圖效果，功能實現(xiàn)非常簡單，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了jquery獲取復選框被選中的值的方法,需要的朋友可以參考下2014-03-03