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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
使用compose函数优化代码提高可读性及扩展性
Jun 16 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的十大要点(上)
2009/02/04 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
2010/06/07 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jquery判断复选框是否被选中的方法
2015/10/16 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
什么是JavaScript注入攻击?
2016/09/14 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
Python实现合并字典的方法
2015/07/07 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
Python3 replace()函数使用方法
2018/03/19 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
详解rem 适配布局
2018/10/31 HTML / CSS
大学生蛋糕店创业计划书
2014/01/13 职场文书
金融事务专业求职信
2014/04/25 职场文书
高中生逃课检讨书
2014/10/10 职场文书
二审答辩状格式
2015/05/22 职场文书
病假条格式范文
2015/08/17 职场文书