仿京东的商城图片放大功能

最新推荐文章于 2022-09-12 14:37:06 发布

小样还想跑

最新推荐文章于 2022-09-12 14:37:06 发布

阅读量205

点赞数

分类专栏： vue html js 文章标签： javascript vue.js html5 css3

本文链接：https://blog.csdn.net/weixin_45356397/article/details/124005545

版权

js 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

23 篇文章 0 订阅

订阅专栏

html

23 篇文章 0 订阅

订阅专栏

1.源代码

<!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>图片放大</title>
  </head>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .img-box {
      width: 1000px;
      height: 400px;
      margin: 100px auto;
    }
    .left-image {
      width: 400px;
      height: 400px;
      float: left;
      position: relative;
      background-color: bisque;
    }

    .right-preview {
      width: 400px;
      height: 400px;
      background-color: pink;
      float: right;
      border: 1px solid #eee;
      display: none;
      position: relative;
      overflow: hidden;
    }
    .right-preview img {
      display: block;
      width: 800px;
      height: 800px;
      position: absolute;
    }

    .left-image > img {
      display: block;
      width: 100%;
      height: 100%;
      -webkit-user-drag: none;
      -webkit-user-select: none; /*webkit浏览器*/
      -khtml-user-select: none; /*早期浏览器*/
      -moz-user-select: none; /*火狐*/
      -ms-user-select: none; /*IE10*/
      user-select: none;
    }

    .move {
      width: 150px;
      height: 150px;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
      background-image: url(./images/star.png);
      background-repeat: repeat;
    }

    #file {
      border: 1px dotted #999;
      width: 150px;
      height: 150px;
      background-image: url(./images/upload.png);
      background-size: 50% 50%;
      background-repeat: no-repeat;
      background-position: center;
      margin: 0 auto;
      overflow: hidden;
      cursor: pointer;
      border-radius: 5px;
    }

    #file > input {
      display: block;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  </style>
  <body>
    <div class="img-box">
      <div class="left-image" id="left-image">
        <img src="./images/avatar.jpg" alt="" ondragstart="return false" />
        <div class="move" id="move"></div>
      </div>

      <div class="right-preview" id="right-preview">
        <img src="./images/avatar.jpg" alt="" ondragstart="return false" />
      </div>
    </div>

    <div id="file">
      <input type="file" />
    </div>

    <script>
      (function () {
        'use strict';
        // 获取style ,处理兼容的写法
        function getStyle(dom, attr) {
          return window.getComputedStyle ? window.getComputedStyle(dom, null)[attr] : dom.currentstyle[attr];
        }

        let leftImage = document.getElementById('left-image');
        let rightImage = document.getElementById('right-preview');
        let chunk = document.getElementById('move');
        let uploadFile = document.getElementById('file');

        // 移入
        leftImage.addEventListener('mouseover', function () {
          rightImage.style.display = 'block';
          chunk.style.display = 'block';
          chunk.style.cursor = 'move';

          let chunkWidth = parseInt(getStyle(chunk, 'width'));
          let chunkHeight = parseInt(getStyle(chunk, 'height'));
          let leftImageWidth = parseInt(getStyle(leftImage, 'width'));
          let leftImageHeight = parseInt(getStyle(leftImage, 'height'));

          let maxWidth = leftImageWidth - chunkWidth;
          let maxHeight = leftImageHeight - chunkHeight;

          // 移动
          leftImage.addEventListener('mousemove', function (e) {
            // 左侧的移动
            let x = e.clientX;
            let y = e.clientY;

            let cx = x - leftImage.offsetLeft - chunkWidth / 2;
            let cy = y - leftImage.offsetTop - chunkHeight / 2;

            chunk.style.left = (cx <= 0 ? 0 : cx >= maxWidth ? maxWidth : cx) + 'px';
            chunk.style.top = (cy <= 0 ? 0 : cy >= maxHeight ? maxHeight : cy) + 'px';

            let perX = (parseInt(rightImage.children[0].offsetWidth) - parseInt(getStyle(rightImage, 'width'))) / maxWidth;
            let perY = (parseInt(rightImage.children[0].offsetHeight) - parseInt(getStyle(rightImage, 'height'))) / maxHeight;

            rightImage.children[0].style.left = -parseInt(chunk.style.left) * perX + 'px';
            rightImage.children[0].style.top = -parseInt(chunk.style.top) * perY + 'px';
          });
        });

        // 鼠标从左侧移出
        leftImage.addEventListener('mouseout', function (e) {
          rightImage.style.display = 'none';
          chunk.style.display = 'none';
        });

        uploadFile.addEventListener('change', function (e) {
          let file = e.target.files[0];
          let url = URL.createObjectURL(file);

          [...document.getElementsByTagName('img')].forEach((node) => {
            node.setAttribute('src', url);
          });
        });
      })();
    </script>
  </body>
</html>

2.效果图展示

小样还想跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿京东的商城图片放大功能

1.源代码<!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" /> &l
复制链接

扫一扫

专栏目录