ToB企服应用市场:ToB评测及商务社交产业平台

标题: 制作一个简单的图片预览 [打印本页]
作者: 滴水恩情    时间: 2024-12-20 19:53
标题: 制作一个简单的图片预览
要实现一个可以举行点击预览、放大缩小和旋转的图片预览功能，你可以使用 HTML、CSS 和 JavaScript 来构建。下面是一个简单的实现示例，包含以下功能：
代码实现

1. HTML结构

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>图片预览</title>
  7.   <link rel="stylesheet" href="style.css">
  8. </head>
  9. <body>
  10. body>
  11.   <!-- 容器 div，包含缩略图图片 -->
  12.   <div class="container">
  13.     <!-- 缩略图图片（点击后会打开大图预览），使用占位符图片 -->
  14.     <img id="thumbnail" src="https://via.placeholder.com/150" alt="Thumbnail">
  15.   </div>
  17.   <!-- 图片预览模态框，初始时隐藏（通过CSS控制）。用户点击缩略图后显示此部分 -->
  18.   <div id="imagePreview" class="preview-modal">
  19.     <div class="preview-content">
  20.       <!-- 预览大图，初始时显示占位符图片 -->
  21.       <img id="previewImage" src="https://via.placeholder.com/150" alt="Preview Image">
  22.       
  23.       <!-- 控制按钮区，包含放大、缩小、旋转、还原按钮 -->
  24.       <div class="controls">
  25.         <!-- 放大按钮 -->
  26.         <button id="zoomIn">放大</button>
  27.         <!-- 缩小按钮 -->
  28.         <button id="zoomOut">缩小</button>
  29.         <!-- 旋转按钮 -->
  30.         <button id="rotate">旋转</button>
  31.         <!-- 还原按钮，用于重置图片到初始状态 -->
  32.         <button id="reset">还原</button>
  33.       </div>
  34.     </div>
  35.   </div>
  37.   <script src="script.js"></script>
  38. </body>
  39. </html>
复制代码
2. CSS样式

  1. /* 设置页面的基础样式 */
  2. body {
  3.         font-family: Arial, sans-serif;
  4.         margin: 0;
  5.         padding: 0;
  6.         display: flex;
  7.         justify-content: center;
  8.         align-items: center;
  9.         height: 100vh;
  10.         background-color: #f0f0f0;
  11. }
  13. /* 设置图片缩略图容器的样式 */
  14. .container {
  15.         text-align: center;
  16. }
  18. /* 缩略图的样式 */
  19. #thumbnail {
  20.         width: 150px;
  21.         cursor: pointer;
  22.         border: 2px solid #ddd;
  23.         border-radius: 8px;
  24. }
  26. /* 图片预览模态框的样式 */
  27. .preview-modal {
  28.         display: none;
  29.         position: fixed;
  30.         top: 0;
  31.         left: 0;
  32.         width: 100%;
  33.         height: 100%;
  34.         background-color: rgba(0, 0, 0, 0.8);
  35.         justify-content: center;
  36.         align-items: center;
  37. }
  39. /* 预览内容的样式 */
  40. .preview-content {
  41.         position: relative;
  42.         background: #fff;
  43.         padding: 20px;
  44.         border-radius: 8px;
  45.         text-align: center;
  46.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  47. }
  49. /* 预览图片的样式 */
  50. #previewImage {
  51.         max-width: 100%;
  52.         max-height: 80vh;
  53.         transition: transform 0.3s ease;
  54. }
  56. /* 控制按钮容器的样式 */
  57. .controls {
  58.         margin-top: 20px;
  59. }
  61. /* 控制按钮的样式 */
  62. .controls button {
  63.         margin: 0 10px;
  64.         padding: 10px 20px;
  65.         cursor: pointer;
  66.         background-color: #4CAF50;
  67.         color: white;
  68.         border: none;
  69.         border-radius: 4px;
  70.         font-size: 16px;
  71. }
  73. /* 控制按钮的悬停样式 */
  74. .controls button:hover {
  75.         background-color: #45a049;
  76. }
复制代码
3. JavaScript逻辑

  1. // 初始化缩放比例和旋转角度
  2. let scale = 1; // 图片的初始缩放比例为 1（即原始大小）
  3. let rotation = 0; // 图片的初始旋转角度为 0°（即没有旋转）
  5. // 获取页面中的各个 DOM 元素
  6. let thumbnail = document.getElementById('thumbnail'); // 获取缩略图元素
  7. let previewModal = document.getElementById('imagePreview'); // 获取预览框元素
  8. let previewImage = document.getElementById('previewImage'); // 获取预览图像元素
  9. let zoomInButton = document.getElementById('zoomIn'); // 获取放大按钮
  10. let zoomOutButton = document.getElementById('zoomOut'); // 获取缩小按钮
  11. let rotateButton = document.getElementById('rotate'); // 获取旋转按钮
  12. let resetButton = document.getElementById('reset'); // 获取重置按钮
  14. // 点击缩略图时，打开图片预览框
  15. thumbnail.addEventListener('click', () => {
  16.         previewModal.style.display = 'flex';
  17.         previewImage.src = thumbnail.src;
  18. });
  20. // 点击预览框时，如果点击的是预览框背景，关闭预览
  21. previewModal.addEventListener('click', (e) => {
  22.         if (e.target === previewModal) {
  23.                 previewModal.style.display = 'none';
  24.         }
  25. });
  27. // 点击放大按钮时，增加缩放比例
  28. zoomInButton.addEventListener('click', () => {
  29.         scale += 0.1; // 增加缩放比例，每次增加 0.1
  30.         updateTransform(); // 更新图片的缩放和旋转
  31. });
  33. // 点击缩小按钮时，减少缩放比例
  34. zoomOutButton.addEventListener('click', () => {
  35.         scale -= 0.1; // 减少缩放比例，每次减少 0.1
  36.         if (scale < 0.1) scale = 0.1; // 防止缩小比例低于 0.1，确保图片不会过小
  37.         updateTransform(); // 更新图片的缩放和旋转
  38. });
  40. // 点击旋转按钮时，旋转图片 90 度
  41. rotateButton.addEventListener('click', () => {
  42.         rotation += 90; // 每次点击时，旋转角度增加 90°
  43.         updateTransform(); // 更新图片的缩放和旋转
  44. });
  46. // 点击重置按钮时，重置图片的缩放和旋转
  47. resetButton.addEventListener('click', () => {
  48.         scale = 1; // 重置缩放
  49.         rotation = 0; // 重置旋转角度为 0°
  50.         updateTransform(); // 更新图片的缩放和旋转
  51. });
  53. // 更新图片的缩放和旋转效果
  54. function updateTransform() {
  55.         previewImage.style.transform = `scale(${scale}) rotate(${rotation}deg)`;
  56. }
复制代码
代码表明：

测试和扩展：


这个根本实现应该满意简单的图片预览需求。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4