文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何用JS扩展图片？

问如何用JS扩展图片？
EN

Stack Overflow用户
提问于 2022-07-05 08:54:08
回答 1查看 346关注 0票数 0

我使用下面的码页创建了一个库，现在我尝试添加函数单击来展开图像，使用这个JS 方法。遗憾的是，我无法让它开始工作。

任何建议都将是非常有帮助的，无论是关于这个扩展选项还是一个替代方案。请注意，我对JS完全陌生。

提前感谢！

​

代码语言：javascript
复制
var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');
var modalImg = document.getElementById("image");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() { 
  modal.style.display = "none";
}
代码语言：javascript
复制
/*main div*/

.ponudba {
  background-color: rgb(0, 0, 0);
  z-index: 3;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  transition-duration: 0.5s;
  filter: contrast(75%);
  transition: all 0.3s ease-in;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3), 
              0 3px 4px rgba(0, 0, 0, 0.15),
              0 3px 4px rgba(0, 0, 0, 0.7);
              margin: 0 0 0 15%;
  display: block;
  height: 100vh;
  max-width: 100%;
  animation-name: zoom;
  animation-duration: 0.6s;
  z-index: 3;
}

.image:hover {
  filter: contrast(100%);
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(images/...jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(images/...jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(images/...jpg); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(images/...jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(images/...jpg); 
  flex: 3;
}

.image-06 {
  background-image: url(images/...jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(images/...jpg); 
  flex: 1.5;
}

.image-08 {
  background-image: url(images/...jpg);  
  flex: 2.5;
  background-position: 50% 70%;
}

.image-09 {
  background-image: url(images/...jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(images/...jpg);  
  flex: 3;
  background-position: 50% 80%;
}
#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

.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;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
代码语言：javascript
复制
    <div class="ponudba" id="ponudba">
    <div class="image-grid">
      <div class="image-row">
        <div class="image image-01" id="image-01"></div> 
        <div class="image image-02" id="image-02"></div>  
        <div class="image image-03" id="image-03"></div>  
        <div class="image image-04" id="image-04"></div>
        
      </div> 
      <div class="image-row">
        <div class="image image-06" id="image-06"></div>  
        <div class="image image-05" id="image-05"></div>
        <div class="image image-07" id="image-07"></div>
      </div>
      <div class="image-row">
        <div class="image image-08" id="image-08"></div> 
        <div class="image image-09" id="image-09"></div>
        <div class="image image-10" id="image-10"></div>  
      </div>
    </div>  
         <div id="myModal" class="modal">
          <span class="close">&times;</span>
          <img class="modal-content" id="image">
         </div>
        </div>

​

expand
javascript
css
image
gallery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-07-11 12:28:30

因此，在向一个大学求助之后，我得到了--一个有可点击图像的图片库。

这是笔：https://codepen.io/fullstackgenerator/pen/YzaqYdb

​

代码语言：javascript
复制
var modal = document.getElementById('Modal');

var imgaes = document.getElementsByClassName('image');
var modalImg = document.getElementById("image-modal");
imgaes = [].slice.call(imgaes);

console.log(imgaes);

imgaes.forEach(function(item){
    item.onclick = function(){
  modal.style.display = "block";
      
  modalImg.src = this.getAttribute('src');
}
})

var span = document.getElementsByClassName("close")[0];

modalImg.onclick = function() { 
  modal.style.display = "none";
}
代码语言：javascript
复制
body {
  margin: 0;
  background-color: rgb(0, 0, 0);
 }

.ponudba {
  position: relative;
  background-color: rgb(0, 0, 0);
  height: 100vh;
  max-width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  z-index: 6;
}

.image-grid {
  padding: 12px;
}

.image-row {
  display: flex;  
}

.image-row .image {
  margin: 12px;
  height: 220px;  
}

.image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 3px;
  height: 95%;
  max-width: 100%;
}

.image:hover {
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.image-01 {
  background-image: url(https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg); 
  flex: 2;
  background-position: 50% 60%;  
}

.image-02 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg); 
  flex: 1.2;  
}

.image-03 {
  background-image: url(https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2); 
  flex: 1.5;
  background-position: 50% 70%;   
}

.image-04 {
  background-image: url(https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg); 
  flex: 3;
  background-position: 50% 60%;
}

.image-05 {
  background-image: url(https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93); 
  flex: 3;
}

.image-06 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg); 
  flex: 2;  
}

.image-07 {
  background-image: url(https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d); 
  flex: 1.5;
}

.image-08 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png);  
  flex: 2.5;
}

.image-09 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg);  
  flex: 1;
}
.image-10 {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg);  
  flex: 3;
}

#myImg {
  border-radius: 3px;
  cursor: pointer;
  transition: 0.3s;
}

.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
margin: auto;
  display: block;
   animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
  .image-row {
    flex-direction: column;
  }
  
  .image-row .image {
    flex-basis: auto;
  }
}
代码语言：javascript
复制
<!--a BIG thank you to @awecodeman!-->

<div class="ponudba" id="ponudba">
        <div class="image-grid">
          <div class="image-row">
            <div class="image image-01" id="image-01" src="https://res.cloudinary.com/dtpgi0zck/image/upload/s--fMAvJ-9u--/c_fit,h_580,w_860/v1/EducationHub/photos/sun-blasts-a-m66-flare.jpg"></div> 
            <div class="image image-02" id="image-02" src="https://cdn.mos.cms.futurecdn.net/KqzWwkCMPeZHFra2hkiJWj.jpg"></div>  
            <div class="image image-03" id="image-03" src="https://acs-h.assetsadobe.com/is/image//content/dam/cen/99/11/WEB/09911-feature3-venus.jpg/?$responsive$&wid=700&qlt=90,0&resMode=sharp2"></div>  
            <div class="image image-04" id="image-04" src="https://cdn.mos.cms.futurecdn.net/yCPyoZDQBBcXikqxkeW2jJ-1200-80.jpg"></div>
          </div> 
          
          <div class="image-row">
            <div class="image image-05" id="image-05" src="https://images.24ur.com/media/images/1000xX/Oct2020/51ae60002d9189cc75b0_62469955.jpg?v=6e93"></div>  
            <div class="image image-06" id="image-06" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg/801px-Jupiter%2C_image_taken_by_NASA%27s_Hubble_Space_Telescope%2C_June_2019_-_Edited.jpg"></div>
            <div class="image image-07" id="image-07" src="https://images.24ur.com/media/images/884xX/Oct2019/d33eec2c51_62323281.jpg?v=d41d"></div>
          </div>
          
          <div class="image-row"">
            <div class="image image-08" id="image-08" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png/800px-Uranus_as_seen_by_NASA%27s_Voyager_2_%28remastered%29.png"></div> 
            <div class="image image-09" id="image-09" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Neptune_Full.jpg/640px-Neptune_Full.jpg"></div>
            <div class="image image-10" id="image-10" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Pluto_in_True_Color_-_High-Res.jpg/800px-Pluto_in_True_Color_-_High-Res.jpg"></div>     
                                                       <div id="Modal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content image" id="image-modal"></div>
          </div> 
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72866590

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档