jQuery实现的指纹扫描效果实例(附演示与demo源码下载)

2019-11-20 10:41:56

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：nodejs实现bigpipe异步加载页面方案

下一篇：Bootstrap树形组件jqTree的简单封装