纯js实现商城商品放大镜

最新推荐文章于 2023-04-14 21:57:05 发布

WSZFSNFK

最新推荐文章于 2023-04-14 21:57:05 发布

阅读量817

点赞数 4

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

本文链接：https://blog.csdn.net/WSZFSNFK/article/details/122575146

版权

js实现商品大图

思路

首先创建两个盒子，两个盒子给定宽高
给这俩个盒子相对定位----重点
第一个盒子内部放一个小盒子，初始为隐藏，背景为透明，为了区别小盒子和图片
第二个盒子隐藏
当鼠标移入图片的时候小盒子显示，并且获取该图片的src。将获取到的src赋给需要展示商品大图的盒子中的图片
通过鼠标移动获取鼠标的坐标
首先处理小盒子的边界问题，确保小盒子不会拖拽出图片的范围
并计算商品大图距离left和top的值
- clientWidth：元素宽
- clientHeight：元素高
- ev.screenX：鼠标坐标X
- ev.screenY：鼠标坐标Y
  - 注意：鼠标坐标Y顶部不是0，经过测试大概是103
- offsetLeft：元素左侧偏移量
- offsetTop：元素顶部偏移的像素值，元素的外边距（margin）
  - 在底下的代码中offsetLeft、offsetTop没有使用到，因为元素的距离什么的都是已知的，所以直接用就好了，在实际开发过程中则不能直接使用
最后，商品大图同样需要处理边界问题，否则，会出现空白部分。

<!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>
</head>
<style>
    * {
     
        margin: 0;
        padding: 0;
    }

    #self {
     
        width: 200px;
        height: 200px;
        /* margin-top: 20px; */