JS实战004:图片弹窗

搞定了轮播，接着再做个图片弹窗的效果，最后再把图片弹窗和轮播结合起来，当我点击轮播中图片时能将图片弹出，达到放大的效果，为了不那么复杂，所以先分开来完成，今天先实现一张图片的弹窗效果，当鼠标点击图片的时候就将图片的原图弹出来，下面是效果图动画。

第一步：，还是先写出HTML基本代码，这里只用到了一张图片，弹出的图片还是原来的哪一张，这里我分别定义了两个div，small指缩小的时候的，magnify是点开之后的。

<div class="popup">
    <div id="small">
        <img id="img" src="../src/assets/images/1.png" alt="填写图片信息描述">
    </div>
    <div id="magnify" >
        <span class="close">&times;</span>
        <img  class="content">
        <span class="describe"></span>
    </div>
</div>

第二步：样式布局，最外面的div是用来定义small中的图片显示区域的，后面可以根据外部的其他div进行调整，这里small我用了display: flex;弹性布局，弹出显示也有个动画效果（从0到1的放大效果），这里close按钮用到的是绝对定位position: absolute;相对于magnify进行定位，而content则是position: fixed;相对于浏览器窗口进行定位。

<style type="text/css">
  html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .popup {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #small {
    width: 300px;
    height: 200px;
    border: 10px solid rgba(35, 36, 35, 0.6);
    z-index: 1;
  }
  #small img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  #small img:hover {
    opacity: 0.5;
  }
  #magnify {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    padding-top: 60px;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
  }
 .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ebe7e7;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .close:hover, .close:focus {
    color:rgb(156, 153, 153);
    text-decoration: none;
    cursor: pointer;
  }
  .content {
    margin: auto;
    display: block;
    max-width: 800px;
    width: 80%;
  }
  .describe {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
  }
  .content, .describe {
    -webkit-animation-name: Eject;
    -webkit-animation-duration: 0.8s;
    animation-name: Eject;
    animation-duration: 0.8s;
  }
  @-webkit-keyframes Eject {
    from {
      -webkit-transform: scale(0)
    }
    to {
      -webkit-transform: scale(1)
    }
  }
  @keyframes Eject {
    from {
      transform: scale(0)
    }
    to {
      transform: scale(1)
    }
  }
</style>

通过以上的样式设置我们就可以得到如下的图案了，窗口中只能一张略缩的小图在浏览器窗口的中央位置，其他样式已经被隐藏起来了，这里我加了一个鼠标放上去半透明的效果，这样就知道浏览器已经响应了我们的设置了，同样我给small添加了一个z-index: 1;，为了方便magnify放在该元素之上作参考。

第三步，实现交互效果，接下来我们要获取到要执行操作的DOM元素，然后在执行相应的点击事件即可实现我们前面的效果，这里我给small和magnify定义成id标签的目的就是为了方便我们对DOM元素的抓取，其他元素则通过他们的子元素形式进行获取。

var magnify = document.getElementById('magnify');
var small = document.getElementById('small');
var img = small.children[0];
var close = magnify.children[0];
var magnifyImg = magnify.children[1];
var describe = magnify.children[2];
img.onclick = function () {
  magnify.style.display = "block";
  magnifyImg.src = this.src;
  describe.innerHTML = this.alt;
}
close.onclick = function () {
  magnify.style.display = "none";
}

这里用到两个赋值操作，一就是把略缩图中的图片传递给放大图中，magnifyImg.src = this.src;二是把后台中的alt属性传递给了span标签中，这样我们就不用单独提供图片的描述信息了,点击之后我们得到就是如下的图像了。

下面是完整代码,有兴趣的可以试试：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JS图片弹窗</title>
<style type="text/css">
  html,
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .popup {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #small {
    width: 300px;
    height: 200px;
    border: 10px solid rgba(35, 36, 35, 0.6);
    z-index: 1;
  }
  #small img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* transition: 0.3s; */
  }
  #small img:hover {
    opacity: 0.5;
  }
  #magnify {
    display: none;
    position: fixed;
    z-index: 2;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
  }
  .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #ebe7e7;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }
  .close:hover,  .close:focus {
    color: rgb(156, 153, 153);
    text-decoration: none;
    cursor: pointer;
  }
  .content {
    margin: auto;
    display: block;
    max-width: 800px;
    width: 80%;
  }
  .describe {
    margin: auto;
    display: block;
    text-align: center;
    color: #ccc;
    padding: 20px 0;
  }
  .content,  .describe {
    -webkit-animation-name: Eject;
    -webkit-animation-duration: 5s;
    animation-name: Eject;
    animation-duration: 5s;
  }
  @-webkit-keyframes Eject {
    from {
      -webkit-transform: scale(0)
    }
    to {
      -webkit-transform: scale(1)
    }
  }
  @keyframes Eject {
    from {
      transform: scale(0)
    }

    to {
      transform: scale(1)
    }
  }  
</style>
</head>
<body>
  <div class="popup">
    <div id="small">
      <img id="img" src="../src/assets/images/1.png" alt="填写图片信息描述">
    </div>
    <div id="magnify">
      <span class="close">&times;</span>
      <img class="content">
      <span class="describe"></span>
    </div>
  </div>
</body>
<script>
    var magnify = document.getElementById('magnify');
    var small = document.getElementById('small');
    var img = small.children[0];
    var close = magnify.children[0];
    var magnifyImg = magnify.children[1];
    var describe = magnify.children[2];
    img.onclick = function () {
      magnify.style.display = "block";
      magnifyImg.src = this.src;
      describe.innerHTML = this.alt;
    }
    close.onclick = function () {
      magnify.style.display = "none";
    }
</script>
</html>

JS实战004:图片弹窗

猜你喜欢