Rumah > hujung hadapan web > tutorial js > Contoh kesan pengimbasan cap jari yang dilaksanakan oleh jQuery (dengan muat turun kod sumber demo dan demo)_jquery

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
1411 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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan