放大镜鼠标移入切换图片点击出现弹框弹出框中图片放大缩小 ESC隐藏弹出框

coder-long

于 2021-12-13 10:38:27 发布

阅读量256

点赞数

分类专栏： HTML 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_45804196/article/details/121899701

版权

本文详细介绍了如何利用原生JavaScript实现鼠标移入切换图片，点击弹出带有放大缩小功能的弹框，并通过ESC键隐藏弹出框。通过CSS和CSS3提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JS实现放大镜鼠标移入切换图片点击出现弹框弹出框中图片放大缩小 ESC隐藏弹出框

  <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
     
      padding: 0;
      margin: 0;
      list-style: none;
    }

    html,
    body {
     
      width: 100%;
      height: 100%;
    }

    .box {
     
      width: 400px;
      height: 225px;
      margin: 100px;
      position: relative;
      display: flex;
    }


    .list {
     
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 110px;
      border: 1px solid bisque;
    }

    .list li {
     
      display: inline-block;
      width: 100px;
    }

    .list li:hover {
     
      cursor: pointer;
    }

    .list li img {
     
      width: 100px;
      object-fit: cover;
    }

    .imgBox {
     
      margin-left: 10px;
      width: 300px;
      height: 220px;
      border: 1px solid rgb(136, 131, 125);
      position: relative;
    }

    .imgBox .shade {
     
      width: 200px;
      height: 120px;
      background: rgba(255, 255, 0, 0.4);
      position: absolute;
      top: 0;
      left: 0;
      cursor: move;
    }

    .imgBox img