学习记录-js基础-商品放大镜_商品放大镜javascript功能是啥-优快云博客

本文链接：https://blog.youkuaiyun.com/sinbowper/article/details/146317382

商品放大镜功能描述

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

实现效果

在这里插入图片描述

商品放大镜实现步骤

1. 准备阶段

算法理解
在这里插入图片描述

商品图片到浏览器边框的距离为getBoundingClientRect()对象的属性，鼠标到浏览器边框的距离为e对象的属性，界定框移动的距离，就是以商品图片为基准的left和top值，为了让鼠标位于界定框正中间，界定框移动距离需要额外减去界定框宽的一半，即为a，b的值（鼠标到商品图片边框的距离）
为了不让界定框超出商品图片范围，我们需要进行判断：如果a小于界定框宽的一半，就让界定框的left值为0，b值同理，由此可实现界定框左和上不超出图片距离；如果a大于商品图片的宽减去界定框宽的一半，即为c，则让界定框的left为商品图片减去界定框的宽，top值同理，即可实现界定框右和下不超过图片的距离
经控制台可知，界定框的宽高为右侧大图的一半，所以大图中的图片的移动距离为当前界定框移动距离的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">服务</div>
              <div class="dd">
                <span class="fw">无忧退货</span>
                <span class="fw">快速退款</span>
                <span class="fw">免费包邮</span>
                <a href="#" class="lj">了解详情</a>
              </div>
            </div>
          </div>
          <div class="attrs">
            <div class="item">
              <div class="dt">颜色</div>
              <div class="dd">
                <img src="./uploads/img/cate-06.png" alt="">
                <img src="./uploads/img/cate-07.png" alt="">
              </div>
            </div>
            <div class="item">
              <div class="dt">颜色</div>
              <div class="dd">
                <span class="size">22英寸</span>
                <span class="size">42英寸</span>
                <span class="size">52英寸</span>
                <span class="size">62英寸</span>
              </div>
            </div>
            <div class="item">
              <div class="dt">数量</div>
              <div class="dd">
                <div class="num">
                  <a href="javascript:;">-</a>
                  <input type="text" value="1">
                  <a href="javascript:;">+</a>
                </div>
              </div>
            </div>
            <div class="item">
              <a class="buy" href="javascript:;">立即购买</a>
            </div>
          </div>
        </div>
      </div>

2. tab栏切换

给父元素绑定事件，利用事件委托的方式给鼠标经过的子元素active类名，并用自定义属性的方式切换商品图片

    	const ul = document.querySelector('.small')			//子元素位置
        ul.addEventListener('mouseover', function (e) {			//事件委托要用mouseover，允许冒泡
          if (e.target.tagName === 'IMG') {
            document.querySelector('.small .active').classList.remove('active')
            e.target.parentNode.classList.add('active')
            document.querySelector('.middle img').src = `./images/${e.target.parentNode.dataset.id}.jpg`			//让商品图片等于子元素图片
          }
        })

3.放大镜效果

1.给商品图片绑定鼠标移动事件，当鼠标移动到商品图片上时，右侧出现商品大图效果，同时使右图的背景图片和商品图片保持一致,当鼠标移除商品图片或商品大图上时，右侧商品大图200ms后消失

		const middle = document.querySelector('.middle')		//商品图片位置
        const large = document.querySelector('.large')			//右侧大图位置
        let timer
        function show() {						//封装右侧大图出现，消失函数
          clearTimeout(timer)					//清除定时器，防止重复点击
          large.style.display = 'block'
          large.style.backgroundImage = `url(${middle.querySelector('img').src})`
        }
        function hide() {
          timer = setTimeout(function () {
            large.style.display = 'none'
          }, 200)
        }
        middle.addEventListener('mouseenter', show)
        middle.addEventListener('mouseleave', hide)
        large.addEventListener('mouseleave', hide)
        large.addEventListener('mouseenter', show)		//大图移入，大图不消失

2.当鼠标在商品图片上移动时，出现界定框，界定框随鼠标移动而移动，且移动范围不能超过商品图片范围

		middle.addEventListener('mousemove', function (e) {				//mousemove事件
          const mouseY = e.pageY - this.getBoundingClientRect().top			//鼠标移动距离
          const mouseX = e.pageX - this.getBoundingClientRect().left
          let layerY = mouseY - layer.offsetHeight / 2					//界定框移动距离
          let layerX = mouseX - layer.offsetWidth / 2
          
          if (mouseY < layer.offsetHeight / 2) {			//条件判断，并获取当前界定框移动距离
            layerY = 0
            layer.style.top = layerY
          }
          if (mouseX < layer.offsetWidth / 2) {
            layerX = 0
            layer.style.left = layerX
          }
          // 算法
          if (mouseY > middle.offsetHeight - layer.offsetHeight / 2) {
            layerY=middle.offsetHeight - layer.offsetHeight
            layer.style.top = layerY
          }
          if (mouseX > middle.offsetWidth - layer.offsetWidth / 2) {
            layerX=middle.offsetWidth - layer.offsetWidth
            layer.style.left = layerX
          }
          layer.style.top = `${layerY}px`			//需要放在判断条件后，否则无法限制界定框的位置
          layer.style.left = `${layerX}px`
          large.style.backgroundPosition = `-${layerX*2}px -${layerY*2}px`
        })

3.右侧大图和界定框同时移动，确保大图内显示的为界定框显示内容

	large.style.backgroundPosition = `-${layerX*2}px -${layerY*2}px`		//大图尺寸为界定框2倍

完整实例代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/product.css">
</head>

<body>
  <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">服务</div>
              <div class="dd">
                <span class="fw">无忧退货</span>
                <span class="fw">快速退款</span>
                <span class="fw">免费包邮</span>
                <a href="#" class="lj">了解详情</a>
              </div>
            </div>
          </div>
          <div class="attrs">
            <div class="item">
              <div class="dt">颜色</div>
              <div class="dd">
                <img src="./uploads/img/cate-06.png" alt="">
                <img src="./uploads/img/cate-07.png" alt="">
              </div>
            </div>
            <div class="item">
              <div class="dt">颜色</div>
              <div class="dd">
                <span class="size">22英寸</span>
                <span class="size">42英寸</span>
                <span class="size">52英寸</span>
                <span class="size">62英寸</span>
              </div>
            </div>
            <div class="item">
              <div class="dt">数量</div>
              <div class="dd">
                <div class="num">
                  <a href="javascript:;">-</a>
                  <input type="text" value="1">
                  <a href="javascript:;">+</a>
                </div>
              </div>
            </div>
            <div class="item">
              <a class="buy" href="javascript:;">立即购买</a>
            </div>
          </div>
        </div>
      </div>
      <script>
        // tab栏切换
        const ul = document.querySelector('.small')
        ul.addEventListener('mouseover', function (e) {
          if (e.target.tagName === 'IMG') {
            document.querySelector('.small .active').classList.remove('active')
            e.target.parentNode.classList.add('active')
            document.querySelector('.middle img').src = `./images/${e.target.parentNode.dataset.id}.jpg`
          }
        })
        // 中盒子显示大盒子
        const middle = document.querySelector('.middle')
        const large = document.querySelector('.large')
        let timer
        function show() {
          clearTimeout(timer)
          large.style.display = 'block'
          large.style.backgroundImage = `url(${middle.querySelector('img').src})`
        }
        function hide() {
          timer = setTimeout(function () {
            large.style.display = 'none'
          }, 200)
        }
        middle.addEventListener('mouseenter', show)
        middle.addEventListener('mouseleave', hide)
        large.addEventListener('mouseleave', hide)
        large.addEventListener('mouseenter', show)
        const layer = document.querySelector('.layer')
        middle.addEventListener('mouseenter', function (e) {
          this.querySelector('.layer').style.display = 'block'
        })
        middle.addEventListener('mousemove', function (e) {
          const mouseY = e.pageY - this.getBoundingClientRect().top
          const mouseX = e.pageX - this.getBoundingClientRect().left
          let layerY = mouseY - layer.offsetHeight / 2
          let layerX = mouseX - layer.offsetWidth / 2
          
          if (mouseY < layer.offsetHeight / 2) {
            layerY = 0
            layer.style.top = layerY
          }
          if (mouseX < layer.offsetWidth / 2) {
            layerX = 0
            layer.style.left = layerX
          }
          // 算法
          if (mouseY > middle.offsetHeight - layer.offsetHeight / 2) {
            layerY=middle.offsetHeight - layer.offsetHeight
            layer.style.top = layerY

          }
          if (mouseX > middle.offsetWidth - layer.offsetWidth / 2) {
            layerX=middle.offsetWidth - layer.offsetWidth
            layer.style.left = layerX
          }
          console.log(layerX, layerY)
          layer.style.top = `${layerY}px`
          layer.style.left = `${layerX}px`
          large.style.backgroundPosition = `-${layerX*2}px -${layerY*2}px`
          
        })
        middle.addEventListener('mouseleave', function (e) {
          layer.style.display = 'none'
        })
      </script>
</body>

</html>