Contoh kesan pengimbasan cap jari yang dilaksanakan oleh jQuery (dengan muat turun kod sumber demo dan demo)

Contoh kesan pengimbasan cap jari yang dilaksanakan oleh jQuery (dengan muat turun kod sumber demo dan demo)_jquery

WBOY

Lepaskan： 2016-05-16 15:18:13

asal

1390 orang telah melayarinya

Contoh dalam artikel ini menerangkan kesan pengimbasan cap jari yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Klik di sini untuk melihat tunjuk cara dalam talian .

Kod khusus adalah seperti berikut:

<!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" &#63; "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" &#63; 0 : 300;
      var initWidth = type === "H" &#63; 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>

Salin selepas log masuk

Klik di sini untuk kod contoh lengkapMuat turun dari tapak ini.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan animasi jQuery dan penggunaan kesan khas" dan "Ringkasan klasik biasa kesan khas jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.