html + 原生javascript简单实现点击图片原位置进行居中缩放查看功能

最新推荐文章于 2023-02-10 16:56:56 发布

peterCZG

最新推荐文章于 2023-02-10 16:56:56 发布

阅读量1.3k

点赞数 3

分类专栏：前端文章标签： html js css

本文链接：https://blog.csdn.net/qq_41777791/article/details/108302009

版权

html + 原生javascript简单实现点击图片原位置进行居中缩放查看功能

1. 实现要点

使用 getBoundingClientRect()方法获取原始图片的左上角位置
蒙版中的图片要使用fixed定位
蒙版图片的水平和垂直居中使用top:50%;left:50%;transform:translate(-50%,-50%)来实现

2. 注意事项

每次点击事件发生时要把transform属性置空或清除，否则会影响重复点击时图片的过渡动画起始位置
谨慎使用vw和vh属性，这两个属性将浏览器的滚动条包含在里面，使用百分比进行设置则不会将滚动条包含在内

3. 效果展示

4. 源码自取

<!-- Created by @一个前端er-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>picture-snapshot</title>
  <style>
    body {
    
      width: 100%;
      padding-top: 60vh;
      text-align: center;
      height: 200vh;
      margin: 0;
    }

    body>img {
    
      max-width: 50vw;
      cursor: zoom-in;
    }

    .modal {