HTML显示带有javascript灯箱的图片

Question

I'm adding an easter egg into my personal page, I'm using this piece of code from the konami.js : 我在个人页面中添加了一个复活节彩蛋，使用了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>

I want that when the sequence is executed, an image inside a lightbox or a modal appears instead of the alert I putted on the $.konami function. 我希望在执行序列时，出现灯箱或模态内的图像，而不是我放在$.konami函数上的警报。 I don´t want to add an image in the structure of the html, is this possible? 我不想在html的结构中添加图像，这可能吗？

Answer 1

If you don't want to use other plugins and rely only on jQuery you can do something like this, let's say your HTML looks like that: 如果您不想使用其他插件而仅依赖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>

You can just write a couple of lines of jQuery and some lines of CSS and you're done. 您只需编写几行jQuery和几行CSS就可以了。 Here's the CSS part for the elements we're going to create through jQuery when the combination is fired: 这是触发组合时将通过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;
}

Basically we're going to add three elements, a big <div class="light"> that will cover the page and have as background a black color with opacity 0.4, another <div class="modal"> which, you guessed, will be your modal and inside it a <img> . 基本上，我们将添加三个元素，一个大的<div class="light">将覆盖该页面，并具有不透明度为0.4的黑色作为背景，另外一个<div class="modal">可能是，将是您的模态，并在其中包含<img> 。 Those elements are not in the page until the function gets fired but it's easier if their style is already in the CSS file. 这些元素直到函数被激发后才会出现在页面中，但是如果样式已经在CSS文件中，则会更容易。 Then, that's the jQuery code: 然后，这就是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();
  });
});

Basically, when the function gets called the elements get appended to the <body> and made visible. 基本上，当函数被调用时，元素将被附加到<body>并使其可见。

You can see it live here on JSFiddle 您可以在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