如何使用 JavaScript 获取多个 div 的背景图像并将它们用作模态图像的来源？
[英]How to get the background-image of multiple divs and use them as the source of modal images with JavaScript?
问题描述
我正在创建一个图片库，我希望能够在点击时打开全尺寸图像。
问题是我没有使用img标签，而是使用div和background-image创建它。
我知道如何使用id对单个图像进行操作，代码如下。 但是，我无法使用classes使其与多个 div 一起使用。 这可能很简单，但我知道基本的 JavaScript 不足以完成这项任务。 我在这个问题上搜索了很多没有结果。 我试过灯箱，但无法使其与背景图像一起使用。 任何帮助将不胜感激，甚至是一些让我走上正确道路的提示。
var modal = document.getElementById("myModal"); var img = document.getElementById("tehran"); var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, ''); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.onclick = function() { modal.style.display = "block"; modalImg.src = backgroundImage; } // close the modal var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; }
.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .img { display: block; width: 200px; height: 100%; margin-right: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } .img-container { display: flex; height: 100px; min-height: 20rem; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } }
<body> <div class="img-container"> <div id="tehran" class="img" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)"></div> <div id="masuleh" class="img" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)"></div> <div id="zanjan" class="img" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"></div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">×</span> <!-- Modal Content --> <img id="img01" class="modal-content"> <div id="caption"></div> </div> </body>
2 个解决方案
解决方案1
1 已采纳 2020-03-10 09:06:52
（我还做了一些 css 更改，使模态图像不会溢出页面）
var modal = document.getElementById("myModal"); Array.from(document.querySelectorAll('.img-container .img')).forEach(function(img){ img.onclick = function() { var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, ''); modal.style.display = "flex"; modalImg.src = backgroundImage; } }); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); // close the modal var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; }
.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } .img { display: block; width: 200px; height: 100%; margin-right: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } .img-container { display: flex; height: 100px; min-height: 20rem; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; max-height: 80%; object-fit: contain; -o-object-fit: contain; animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } }
<body> <div class="img-container"> <div id="tehran" class="img" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)"></div> <div id="masuleh" class="img" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)"></div> <div id="zanjan" class="img" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"></div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">×</span> <!-- Modal Content --> <img id="img01" class="modal-content"> <div id="caption"></div> </div> </body>
解决方案2
1 2020-03-10 09:18:30
您必须定位所有元素（按class ），然后遍历它们以附加事件（ click ）。
此外，由于img具有预定义的含义，我建议您使用除img以外的其他名称作为类。
您可以尝试以下方法：
var modal = document.getElementById("myModal"); var img = document.querySelectorAll(".myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); img.forEach(function(img){ var backgroundImage = img.style.backgroundImage.slice(4, -1).replace(/"/g, ''); img.onclick = function() { modal.style.display = "block"; modalImg.src = backgroundImage; } }); // close the modal var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; }
.img-container { display: flex; height: 100px; min-height: 20rem; } .myImg { display: block; width: 200px; height: 100%; margin-right: 10px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; animation-name: zoom; animation-duration: 0.6s; } @keyframes zoom { from { transform: scale(0) } to { transform: scale(1) } } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; }
<body> <div class="img-container"> <div id="tehran" class="myImg" style="background-image: url(https://images.unsplash.com/photo-1524567492592-cee28084482e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60)"></div> <div id="masuleh" class="myImg" style="background-image: url(https://images.unsplash.com/photo-1567317255448-8e6c04e22114?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80)"></div> <div id="zanjan" class="myImg" style="background-image: url(https://images.unsplash.com/photo-1518727577784-f62f1115eefb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"></div> </div> <!-- The Modal --> <div id="myModal" class="modal"> <!-- The Close Button --> <span class="close">×</span> <!-- Modal Content --> <img id="img01" class="modal-content"> <div id="caption"></div> </div> </body>
如何获取这些javascript值并将其用于图像源？
[英]How would I get these javascript values and use them in an image source?
如何使用Javascript而不是Jquery将Image Source设置为div / img background-image？
[英]How to set Image Source as div/img background-image, using Javascript and not Jquery?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.