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入门指导
Nov 01 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
判断网页编码的方法python版
2016/08/12 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
一年级家长会邀请函
2014/01/25 职场文书
全民健身日活动方案
2014/01/29 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
学习十八大的心得体会
2014/09/12 职场文书
毕业论文致谢信
2015/05/14 职场文书