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 个答案: