• 仿京东放大镜效果（pink老师版）

     

    首先简单定义一下HTML和CSS，这都不是重点，重点是学习javascript

    1.    <style>
    2.         div {
    3.             box-sizing: border-box;
    4.         }
    5.         
    6.         .content {
    7.             width: 1000px;
    8.             height: 600px;
    9.             margin: 0 auto;
    10.             margin-top: 100px;
    11.         }
    12.         
    13.         .left {
    14.             position: relative;
    15.             float: left;
    16.             width: 400px;
    17.             height: 400px;
    18.             border: 1px solid #ccc;
    19.         }
    20.         
    21.         .left img {
    22.             width: 100%;
    23.         }
    24.         
    25.         .right {
    26.             overflow: hidden;
    27.             position: relative;
    28.             display: none;
    29.             float: left;
    30.             width: 600px;
    31.             height: 736px;
    32.             border: 1px solid #ccc;
    33.         }
    34.         
    35.         .right img {
    36.             position: absolute;
    37.             top: 40px;
    38.             left: 50px;
    39.             height: 636px;
    40.         }
    41.         
    42.         span {
    43.             position: absolute;
    44.             top: 0;
    45.             left: 0;
    46.             width: 200px;
    47.             height: 200px;
    48.             background-color: rgb(193, 193, 33);
    49.             opacity: .5;
    50.             display: none;
    51.         }
    52.     </style>
    53.     <script src="放大2.js"></script>
    54. </head>
    55.  
    56. <body>
    57.     <div class="content">
    58.         <div class="left">
    59.             <img src="phonemin.jpg" alt="">
    60.             <span id="span"></span>
    61.         </div>
    62.         <div class="right">
    63.             <img src="phonebig.png" alt="" class="rightImg">
    64.         </div>
    65.     </div>
    66. </body>

    就会有这样的效果 

     二、js部分

    步骤及注意点

    1.采用load让所有代码加载完毕后，再执行JS代码，就不用把JS代码写到后面了

    2、 当鼠标移入移出left盒子时，span和right显示与隐藏（也就是前面用left作为目标对象的原因）

    3、当鼠标在left盒子中移动时，获取他在left中的坐标

    e.pageX - left.offsetLeft:  鼠标在页面中的位置 - left盒子最左侧在页面中的距离（因为此处left盒子父级元素没有定位所以他的offsetLeft大小就是页面的距离）

     4、将上面的值赋值给span遮罩盒子的top和left （因为span就是用定位做的，所以不用额外给）——鼠标在left盒子中的位置与span遮罩的左上角重合

    5、上述有些许的不好看，所以就让鼠标在盒子中的位置 - span遮罩盒子的一半大小，因此鼠标在left中的位置，就是span中间的位置。

    注意：此时的位置坐标还是鼠标在盒子中的位置。尽管他的位置发生了变化，但是在上述中减去了大小（e.pageX - left.offsetLeft - span.offsetWidth / 2 =  鼠标在盒子中的位置）

    6、用 if   else 语句限制一下span盒子的位置，不让他的能移动的位置超出left盒子

    注意：如果单纯的只考虑 如果 left<=0,让  left = 0;   但是此时他的上下还是可以超出边界的！！

    如果在前面加上：   如果left<=0 & top<=0 -->left = 0;top = 0;这样就会既让left不会越界，top也不会越界，剩下的原理相似

    7、右边的大盒子跟着小盒子按照相应的比例走

    大盒子应走的距离   /  大盒子能最大走的距离  =   span盒子应走的距离 / span盒子能走的最大距离 

    --->大盒子应走的距离 = 大盒子能最大走的距离 * span盒子应走的距离 / span盒子能走的最大距离 

    8、直接给right盒子中的图片赋值是不起作用的，要给right盒子中的图片绝对定位才行

    9、给right盒子中图片赋值时，给shouldX 和 shouldY 负值，这样效果更好 

    10、 当鼠标在left盒子左上角时，给right盒子中的图片传递的位置 为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角，这样span盒子再向右移动时，right盒子中的图片就会超出。
            让鼠标在left左上角时，让right盒子中的图片靠近右下角，这样再按比例来移动时，图像不会超出right盒子

    1. window.addEventListener('load', function() {
    2.     var left = this.document.querySelector('.left');
    3.     var right = this.document.querySelector('.right');
    4.     var span = this.document.querySelector('span');
    5.     //1、 当鼠标移入left盒子时，span和right显示
    6.     left.addEventListener('mouseover', function() {
    7.         span.style.display = 'inline-block';
    8.         right.style.display = 'block';
    9.     });
    10.     left.addEventListener('mouseout', function() {
    11.         span.style.display = 'none';
    12.         right.style.display = 'none';
    13.     });
    14.     // 2、让span盒子能随着鼠标在left中的移动而移动
    15.     // （1）当鼠标移动时获取鼠标在left盒子中的位置
    16.     left.addEventListener('mousemove', function(e) {
    17.         var x = e.pageX - left.offsetLeft;
    18.         var y = e.pageY - left.offsetTop;
    19.         // (2)把x,y赋值给span的位置
    20.         // span.style.left = x + 'px';
    21.         // span.style.top = y + 'px';
    22.         // (3)出现问题，鼠标总是在span盒子的左上角移动，要把他移动到span盒子的中间
    23.         // 往右下角平移了一段距离，总体还是鼠标在盒子中的距离
    24.         var hleft = x - span.offsetWidth / 2;
    25.         var htop = y - span.offsetHeight / 2;
    26.         // span.style.left = hleft + 'px';
    27.         // span.style.top = htop + 'px';
    28.         // (4)不让span盒子出left的边界
    29.         if (hleft <= 0 & htop <= 0) {
    30.             hleft = 0;
    31.             htop = 0
    32.         } else if (hleft <= 0 & htop >= 200) {
    33.             hleft = 0;
    34.             htop = 200;
    35.         } else if (hleft >= 200 & htop <= 0) {
    36.             hleft = 200;
    37.             htop = 0;
    38.         } else if (hleft >= 200 & htop >= 200) {
    39.             hleft = 200;
    40.             htop = 200;
    41.         } else if (hleft <= 0) {
    42.             hleft = 0;
    43.         } else if (hleft >= 200) {
    44.             hleft = 200;
    45.         } else if (htop <= 0) {
    46.             htop = 0
    47.         } else if (htop >= 200) {
    48.             htop = 200;
    49.         }
    50.         console.log(hleft, htop);
    51.         span.style.left = hleft + 'px';
    52.         span.style.top = htop + 'px';
    53.         // 3、让大盒子跟着span盒子移动相应比例距离
    54.         // 3.1 大盒子最大移动距离
    55.         var rightImg = document.querySelector('.rightImg');
    56.         var bigMaxX = right.offsetWidth - rightImg.offsetWidth;
    57.         var bigMaxY = right.offsetHeight - rightImg.offsetHeight;
    58.         // right盒子应该移动的距离 = span移动的距离 * right最大移动距离 / span最大移动距离
    59.         var shouldX = hleft * bigMaxX / (left.offsetWidth - span.offsetWidth);
    60.         var shouldY = htop * bigMaxY / (left.offsetHeight - span.offsetHeight);
    61.  
    62.         console.log('shouldX ' + shouldX);
    63.         console.log('shouldY ' + shouldY);
    64.         //当鼠标在left盒子左上角时，给right盒子中的图片传递的位置 为top:0;left:0;这样就让right盒子中的图片贴近right盒子左上角，这样span盒子再向右移动时，right盒子中的图片就会超出。
    65.         //让鼠标在left左上角时，让right盒子中的图片靠近右下角，这样再按比例来移动时，图像不会超出right盒子
    66.         rightImg.style.left = -shouldX + 85 + 'px';
    67.         rightImg.style.top = -shouldY + 100 + 'px';
    68.     })
    69.  
    70.  
    71. })

  • 相关阅读:
    无人出租赛道洗牌开启？这家公司为什么会黄？
    [附源码]计算机毕业设计JAVA基于web的球类体育馆预定系统
    【编码魔法师系列_构建型1.1】简单工厂模式（Static Factory）
    C#界面里Form.Language 属性的使用
    最长连续序列[中等]
    Vue3.0 响应式reactive的原理实现
    C 标准库 - ＜stdio.h＞ 详解
    JavaScript入门⑦-DOM操作大全
    如何自定义SpringBoot的白标错误页面？
    算法 分糖果-(贪心)
  • 原文地址：https://blog.csdn.net/m0_45142186/article/details/125550378