HTML顯示帶有javascript燈箱的圖片

Question

我在個人頁面中添加了一個復活節彩蛋，使用了konami.js中的這段代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery Konami # Letterable Konami-Code</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <p>T E S T I N G  P A G E.</p>

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.konami.js"></script>
    <script>
        var win = $(window),
            body = $('body');

        // or use the default `↑ ↑ ↓ ↓ ← → ← → B A`
        $.konami(function() {
            alert("Show image");
        });

    </script>
</body>
</html>

我希望在執行序列時，出現燈箱或模態內的圖像，而不是我放在$.konami函數上的警報。 我不想在html的結構中添加圖像，這可能嗎？

Answer 1

如果您不想使用其他插件而僅依賴jQuery，則可以執行以下操作，假設您的HTML如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Konami # Letterable Konami-Code</title>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
   <p>T E S T I N G  P A G E.</p>

   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
   <script src="js/jquery.konami.js"></script>
   <script>
    //Insert code here
   </script> 
</body>
</html>

您只需編寫幾行jQuery和幾行CSS就可以了。 這是觸發組合時將通過jQuery創建的元素的CSS部分：

.modal{
  position:absolute;
  z-index:100;
  border: 1px solid #000;
  border-radius: 6px;
  background: #fff;
  padding: 20px;
  top: 100px;
  left: 200px;
  display:none;
}
.modal img{
  width: 150px
}
.light{
  position: fixed;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.4);
  top:0;
  left:0;
  display:none;
}

基本上，我們將添加三個元素，一個大的<div class="light">將覆蓋該頁面，並具有不透明度為0.4的黑色作為背景，另外一個<div class="modal">可能是，將是您的模態，並在其中包含<img> 。 這些元素直到函數被激發后才會出現在頁面中，但是如果樣式已經在CSS文件中，則會更容易。 然后，這就是jQuery代碼：

$(document).ready(function(){
  $.konami(function() {
   $('body').append('<div class="light"><div class="modal"><img src="https://pbs.twimg.com/profile_images/3190248843/9d85cb3312179987e6f25febd52e5fa2_400x400.png"/></div></div>');
   $('.light, .modal').fadeIn();
  });
});

基本上，當函數被調用時，元素將被附加到<body>並使其可見。

您可以在JSFiddle上看到它

HTML顯示帶有javascript燈箱的圖片

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-14 02:24:12

HTML顯示帶有javascript燈箱的圖片

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-14 02:24:12

解決方案1
0 已采納 2015-09-14 02:24:12