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

前端技术 2023/09/06 JavaScript

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

本文地址：https://www.stayed.cn/item/17293

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案