jQuery로 구현한 지문 스캐닝 효과 예시(데모 및 데모 소스코드 다운로드 포함)_jquery
- WBOY원래의
- 2016-05-16 15:18:131417검색
이 글의 예시에서는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.