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