Question

我搜索了几个帖子，但找不到类似于我需要做的事情，或者我发现我无法开始工作 - 很确定这只是我而已！因此，页面上有3个链接。单击链接时，它应显示照片（在同一页面上）并应用了叠加层。我可以打开图像但是对于我的生活无法弄清楚如何让叠加层附加。当图像打开时，它应该保持在同一页面上（通过叠加层可以看到链接）。用户应该能够单击关闭按钮或图像本身返回链接显示。

我知道代码是乱七八糟的，因为我一直在尝试任何我能想到的尝试让它发挥作用，因为我目前仍然坚持让所有东西都能正常显示而且甚至没有得到如果有人能给我一个提示我会非常感激。

谢谢！

HTML

<!doctype html>
<html>
<head>
  <title> Image preview  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="preview.css">
  <script src="preview.js"></script>
  <script>

    window.onload = function() {
      Preview.init();
    };
  </script>
</head>
<body>
 <ul>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript 
      /homework/images/image1.jpg" data-preview="image1">Mt. Rainier, 
      1</a></li>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript
     /homework/images/image2.jpg" data-preview="image2">Mt. Rainier, 
     2</a></li>
   <li><a href="https://courses.oreillyschool.com/advancedjavascript
     /homework/images/image3.jpg" data-preview="image3">Mt. Rainier, 
     3</a></li>
 </ul>
</body>
</html>

CSS

    .previewOverlay {
      position: absolute;
      display: none;
      top: 0px;
      left: 0px;
      background-color: rgba(0, 0, 0, 0.7);
      width: 100%;
      height: 100%;
    }
    .previewOverlay img {
      position: relative;
      border: 20px solid white;
      border-radius: 10px;
      top: 50px;
      left: 50px;
    }
    .close {
      position: absolute;
      top: 0px;
      left: 0px;
      color: #fdfdfd;
      font-size: 50px;
      text-shadow: 0px 0px 5px black;
    }
    .close:after {
      content: "\2717";
    }
   .close:hover {
      color: orange;
    }

的JavaScript

 function Preview () {
 var mtnPics = document.querySelectorAll("a");
 console.log(mtnPics); 
 mtnPics.addEventListener("click", function(event) {
  event.preventDefault()
  }); 

 for (var i = 0; i < mtnPics.length; i++) {
  mtnPics[i].onclick = showPicture;
}    

function showPicture (pictureURL) {
  var picPicked = document.getElementById("a").value;
  console.log(picPicked);

 //Create Div's for image display. 
 var ul = document.getElementById("ul");       
 var picDiv = document.createElement("div");
 picDiv.setAttribute("class", "previewOverlay");
 var imgDiv = document.createElement("div");
 imgDiv.setAttribute("class", "previewOverlay img");

 var imgSelected = document.getElementById("a").value;
 console.log(imgSelected);

 imgDiv.src = imgSelected;

 var buttonClose = document.createElement("button");

 //Assign divs and buttons
 buttonClose = document.setAttribute("class", "close");

 ul.appendChild(imgDiv); 
 imgDiv.appendChild(pictureURL);
 imgDiv.appendChild(buttonClose); 
 picDiv.appendChild(imgDiv);

 picDiv.insertBefore(ul, picDiv.firstChild);

 //document.body.appendChild(picDiv);

 buttonClose.onclick = closePicture;
  }


 function closePicture(targetURL) {
   document.removeElement('picDiv');
 }  

}

使用javascript将图像附加到叠加层

0 个答案: