js点击图片弹出特效代码

在JavaScript中，实现点击图片弹出特效通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例，展示了如何创建一个点击图片后弹出自定义特效的效果。

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Popup Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
  <img src="your-image.jpg" alt="Sample Image" id="popupImage">
</div>
<div id="popup" class="popup">
  <span class="close-btn">&times;</span>
  <img src="" alt="Popup Image" id="popupImg">
</div>
<script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
  font-family: Arial, sans-serif;
}

.image-container img {
  cursor: pointer;
  width: 200px;
}

.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  padding: 20px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.close-btn {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
  var popup = document.getElementById('popup');
  var popupImg = document.getElementById('popupImg');
  var closeBtn = document.querySelector('.close-btn');

  document.getElementById('popupImage').onclick = function() {
    popupImg.src = this.src;
    popup.style.display = 'block';
  };

  closeBtn.onclick = function() {
    popup.style.display = 'none';
  };

  window.onclick = function(event) {
    if (event.target == popup) {
      popup.style.display = 'none';
    }
  };
});