个人中心
gpt4 book ai didi

javascript - javascript弹出图库效果问题

转载 作者：行者123 更新时间：2023-12-04 15:13:35 25 4
gpt4 key购买 nike

<分区>

我没有找到问题所在，我尝试在单击查看更多按钮后弹出更大的图像，但我在检查器按钮中收到此消息错误。addEventListner 不是函数我不明白是什么错了。

为这个例子加上 const 是不正确的？因为我尝试使用 var，但没有任何效果。

``` 

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css">
      <script src="main.js"></script>
      <title>Document</title>
    </head>
    
    <body>
      <section id="portfolio">
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="project">
          <img class="project-image" src="https://source.unsplash.com/random" alt="">
          <div class="grid-overlay">
            <button class="viewbutton"> View more</button>
          </div>
        </div>
    
        <div class="overlay">
          <div class="overlay-inner">
            <div class="close">Close X</div>
          </div>
        </div>
    
    
      </section>
      <script>
    
        const buttons = document.querySelectorAll('.project');
        const overlay = document.querySelector('.overlay');
        const overlayImage = document.querySelector('.overlay-inner img');
    
        function open() {
          overlay.classList.add('open');
          const src = e.currentTarget.querySelector('img').src;
          overlayImage.src = src;
        }
    
        function close() {
          overlay.classList.remove('open');
        }
        buttons.forEach(button => button.addEventListner('click', open));
        overlay.addEventListner('click', close);
    
      </script>
    </body>
    
    </html>

``` 

``` 

    body{
      font-family: tahoma;
      margin: 0;
      }
    
    button{
      cursor: pointer;
      }
    #portfolio{
      width: 100%;
      min-height: 100vh;
      background: white;
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, minmax(200px, 1fr));
      grid-template-rows: 1fr 1fr;
      grid-gap: 2px;
      }
    
    .project{
      position: relative;
      background: #f2dad7;
      overflow: hidden;
      }
    
    .project img{
      position: absolute;
      opacity: 0.9;
      }
    
    .project:hover .grid-overlay{
      transform: translateY(0%)
      }
    
    .grid-overlay{
      background: rgba(78,84,229,0.91);
      height: 100%;
      grid-column: -1;
      grid-row: -1;
      position: relative;
      display: grid;
      justify-items: center;
      align-items: center;
      transform: translateY(101%);
      transition: all 0.3s ease-in-out;
      }
    
    .grid-overlay button{
      background: none;
      outline: none;
      font-weight: 100;
      letter-spacing: 2px;
      border: 1px solid white;
      color: white;
      text-transform: uppercase;
      padding: 10px;
    }
    .grid-overlay button:hover{
    transition: all 0.3s ease-in-out;
    background: white;
    color: #d1a39e;
    transform: scale(1.05);
    }
    
    .overlay{
      position: fixed;
      background: rgba(71, 69, 69, 0.7);
      top: 0;
      right:0;
      bottom: 0;
      left: 0;
      display: none;
      z-index: 3;
    }
    .overlay.open{
      display: grid;
      align-items: center;
      justify-items: center;
    }
    .overlay-inner{
     background: white;
     width: 700px;
     padding: 20px;
     position: relative;
     opacity: 1;
    }
    .close{
      position: absolute;
      top: 3px;
      right: 10px;
      background: none;
      outline: 0;
      color: #474545;
      border: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .close:hover{
      color: #d1a39a
    }
    
    .project-image{
      margin-left: -50%;
    }

``` 
https://codepen.io/tagline2020/pen/gOMdJVp

25 4 0
文章推荐： wpf - 水平或垂直 WPF 线限制为 125,000 像素？
文章推荐： .net - 什么是托管模块？
文章推荐： java - 文件观察器不适用于 android 10 及更高版本
文章推荐： command - DDD中的DTO和Command有什么区别？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com