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在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
js实现分割上传大文件
Mar 09 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
js键盘事件实现人物的行走
Jan 17 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判断文件夹是否存在不存在则创建
2015/04/09 PHP
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
如何编写jquery插件
2017/03/29 jQuery
javascript中this用法实例详解
2017/04/06 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python中的super用法详解
2015/05/28 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
教师实习自我鉴定
2013/12/13 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
秘书英文求职信
2014/04/16 职场文书
学校教研活动总结
2014/07/02 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
狮子林导游词
2015/02/03 职场文书
消防安全月活动总结
2015/05/08 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书