学习记录-js基础-商品放大镜

商品放大镜功能描述

1. 滑动侧边栏，展示不同的商品
2. 选中商品图片，右侧出现商品大图放大效果，选中放大效果图片，图片不消失
3. 鼠标离开商品图片或者大图时，大图延迟200毫秒之后消失

实现效果

商品放大镜实现步骤

1. 准备阶段

算法理解

1. 商品图片到浏览器边框的距离为getBoundingClientRect()对象的属性，鼠标到浏览器边框的距离为e对象的属性，界定框移动的距离，就是以商品图片为基准的left和top值，为了让鼠标位于界定框正中间，界定框移动距离需要额外减去界定框宽的一半，即为a，b的值（鼠标到商品图片边框的距离）
2. 为了不让界定框超出商品图片范围，我们需要进行判断：如果a小于界定框宽的一半，就让界定框的left值为0，b值同理，由此可实现界定框左和上不超出图片距离；如果a大于商品图片的宽减去界定框宽的一半，即为c，则让界定框的left为商品图片减去界定框的宽，top值同理，即可实现界定框右和下不超过图片的距离
3. 经控制台可知，界定框的宽高为右侧大图的一半，所以大图中的图片的移动距离为当前界定框移动距离的2倍

掌握事件对象的部分属性

代码	含义
对象.getboundingClientRect()	对象到浏览器边框距离（.left .top）
e.pageX,e.pageY	鼠标到浏览器边框的距离

html框架

<div class="xtx-wrapper">
    <div class="container">
      <!-- 商品信息 -->
      <div class="xtx-product-info">
        <div class="left">
          <div class="pictrue">
            <div class="middle">
              <img src="./images/1.jpg" alt="">
              <div class="layer"></div>
            </div>
            <div class="small">
              <ul>
                <li data-id="1" class="active"><img src="./images/1.jpg" alt=""></li>
                <li data-id="2"><img src="./images/2.jpg" alt=""></li>
                <li data-id="3"><img src="./images/3.jpg" alt=""></li>
                <li data-id="4"><img src="./images/4.jpg" alt=""></li>
                <li data-id="5"><img src="./images/5.jpg" alt=""></li>
              </ul>
            </div>
            <div class="large"></div>
          </div>
          <div class="other">
            <ul>
              <li>
                <p>销量人气</p>
                <p>1999+</p>
                <p>销量人气</p>
              </li>
              <li>
                <p>商品评价</p>
                <p>999+</p>
                <p>查看评价</p>
              </li>
              <li>
                <p>收藏人气</p>
                <p>299+</p>
                <p><a href="javascript:;">收藏商品</a></p>
              </li>
              <li>
                <p>品牌信息</p>
                <p>小米</p>
                <p><a href="javascript:;">品牌主页</a></p>
              </li>
            </ul>
          </div>
        </div>
        <div class="right">
          <h3 class="name">小米电视4A 32英寸</h3>
          <p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p>
          <p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p>
          <div class="address">
            <div class="item">
              <div class="dt">促销</div>
              <div class="dd">12月好物放送，App领券购买直降120元</div>
            </div>
            <div class="item">
              <div class="dt">配送</div>
              <div class="dd">至
                <div class="box">
                  <span>陕西 西安 <i></i></span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="dt">服务