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


Posted in Javascript onJanuary 26, 2016

本文实例讲述了jQuery实现的指纹扫描效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

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

点击此处查看在线演示效果。

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
为EasyUI的Tab标签添加右键菜单的方法
Jul 14 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 #Javascript
javascript实现2016新年版日历
Jan 25 #Javascript
基于javascript实现图片左右切换效果
Jan 25 #Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 #Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 #Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 #Javascript
jQuery中inArray方法注意事项分析
Jan 25 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
python实现FTP服务器服务的方法
2017/04/11 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python Django 前后端分离 API的方法
2019/08/28 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
浅析python 字典嵌套
2020/09/29 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
中软Java笔试题
2012/11/11 面试题
员工薪酬福利制度
2014/01/17 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
医院营销工作计划
2015/01/16 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
签约仪式致辞
2015/07/30 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
Python访问Redis的详细操作
2021/06/26 Python
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫