HTML+CSS+JS实例——商品展示图片切换及放大镜功能实现

效果：
清楚的看美女，哈哈哈
在这里插入图片描述

问题分析：
通过将鼠标指向指定的图片，将鼠标移动到图片区域时，跟随鼠标移动显示一个半透明小区域；半透明区域部分的图片放大，进行细节查看。
限制条件：

鼠标移入待放大图片区域时，半透明区域出现；
鼠标移动在待方法图片区域内移动，半透明区域随着鼠标移动且不能超出图片区域。图片放大区域以指定比例在指定位置显示。
鼠标移出待放大图片区域时，半透明区域消失，且放大区域消失

问题解决：

通过鼠标事件onmourseover监听鼠标的略过图片，改变透明小区域和放大区域的display: block/none;
通过event对象获取鼠标的当前坐标位置，即方法event.clientX, event.clientY，然后通过鼠标事件onmoursemove监听，重置半透明区域的top和left的值，且这个值要对其进行限制。

效果：

<!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>
    <style>
      *{
     
     
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .choose{
     
     
        width: 400px;
        height: 600px;
        float: left;
        margin:50px 0 0 50px;
      }
      .content{
     
     
        width: 300px;
        height: 400px;
        border: 1px solid gray;
        position: relative;
      }
  
      .content img {
     
     
        width: 300px;
        height: 400px;
      }
      #listshow{
     
     
        width: 400px;
        height: 100px;
        margin-top: 20px;
      }
      #listshow li{
     
     
        width: 70px;
        height: 100px;
        float: left;
        border:1px solid #666;
      }
      #listshow li img{
     
     
        width: 68px;
        height: 100px;
      }
      #listshow .selected{
     
     
        border: 2px solid brown;
      }
      .larger{
     
     
        width: 400px;
        height: 400px;
        position: absolute;
        border:1px solid #666;

        top: 50px;
        left: 500px;
        float: left;
        overflow: hidden;
        display: none;
      }
      .big{
     
     
        width: 800px;
        height: 800px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .shadow{
     
     
        width: 150px;
        height: 150px;
        background-color: rgba(240, 20, 141, 0.8);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        display: none;
      }
    </style>
</head>
<body>
  <div class="choose">
    <div class="content">
      <img src="https://pics4.baidu.com/feed/42a98226cffc1e174edefa0c5eb41005738de951.jpeg?token=b6b92f5cffbe974bee31f24d5a79264c" id = "small">
      <div class="shadow"></div>
    </div>
    <ul id = "listshow">
      <li class="selected">
        <img src="https://pics4.baidu.com/feed/42a98226cffc1e174edefa0c5eb41005738de951.jpeg?token=b6b92f5cffbe974bee31f24d5a79264c" 
        data-img = "https://pics4.baidu.com/feed/42a98226cffc1e174edefa0c5eb41005738de951.jpeg?token=b6b92f5cffbe974bee31f24d5a79264c" 
        alt="">
      </li>
      <li>
        <img src="http://pics7.baidu.com/feed/2cf5e0fe9925bc315eba913653fb6bb7ca137067.jpeg?token=01a32232b4d1e5a82bf7eacd0bacdba3"
         data-img = "http://pics7.baidu.com/feed/2cf5e0fe9925bc315eba913653fb6bb7ca137067.jpeg?token=01a32232b4d1e5a82bf7eacd0bacdba3" 
         alt="">
      </li>
      <li>
        <img src="http://pics4.baidu.com/feed/0eb30f2442a7d93383ed7de9a16f371572f00189.jpeg?token=323d4b7ae1e676b2871943227df5c51a" 
        data-img = "http://pics4.baidu.com/feed/0eb30f2442a7d93383ed7de9a16f371572f00189.jpeg?token=323d4b7ae1e676b2871943227df5c51a" 
        alt="">
      </li>
      <li>
        <img src="https://pics2.baidu.com/feed/eaf81a4c510fd9f9aafbbed82809322c2934a4ba.jpeg?token=89d457ae923ab8e9af0385b9322e05d0" 
        data-img = "https://pics2.baidu.com/feed/eaf81a4c510fd9f9aafbbed82809322c2934a4ba.jpeg?token=89d457ae923ab8e9af0385b9322e05d0" 
        alt="">
      </li>
    </ul>
  </div>
  <div class="larger">
    <img class = "big" src="https://pics4.baidu.com/feed/42a98226cffc1e174edefa0c5eb41005738de951.jpeg?token=b6b92f5cffbe974bee31f24d5a79264c" >
  </div>
</body>
<script type="text/javascript">
  let showli = document.getElementsByTagName('li');
  let content = document.querySelector('.content');
  let larger = document.querySelector('.larger');
  let shadow = document.querySelector('.shadow');
  let bigImg = document.querySelector('.big');


  shadowW=shadow.style.width?shadow.style.width:document.defaultView.getComputedStyle(shadow,null).width;
  shadowW=parseInt(shadowW);
  shadowH=shadow.style.height?shadow.style.height:document.defaultView.getComputedStyle(shadow,null).height;
  shadowH=parseInt(shadowH);

  contentW = content.style.width? content.style.width:document.defaultView.getComputedStyle(content,null).width;
  contentW = parseInt( contentW);
  contentH = content.style.height? content.style.height:document.defaultView.getComputedStyle(content,null).height;
  contentH = parseInt( contentH);

  // 考虑content的margin
  chooseMarginL = content.style.marginLeft?   content.style.marginLeft:document.defaultView.getComputedStyle(content,null).marginLeft;
  chooseMarginL = parseInt(chooseMarginL);
  chooseMarginT = content.style.marginTop? content.style.marginTop:document.defaultView.getComputedStyle(content,null).marginTop;
  chooseMarginT = parseInt(chooseMarginT);
 

  bigImgW=bigImg.style.width?bigImg.style.width:document.defaultView.getComputedStyle(bigImg,null).width;
  bigImgW=parseInt(bigImgW);
  bigImgH=bigImg.style.height?bigImg.style.height:document.defaultView.getComputedStyle(bigImg,null).height;
  bigImgH=parseInt(bigImgH);

  largerW=larger.style.width?larger.style.width:document.defaultView.getComputedStyle(larger,null).width;
  largerW=parseInt(largerW);
  largerH=larger.style.height?larger.style.height:document.defaultView.getComputedStyle(larger,null).height;
  largerH=parseInt(largerH);


  for(let i = 0;i<showli.length;i++){
     
     
    let showitem = showli[i];
    showitem.onmouseover = showitem.onclick = function(e){
     
     
      let evt = window.event||e;
      for(let j =0;j<showli.length;j++){
     
     
        showli[j].className = "";
      }
      let showimg = this.getElementsByTagName("img")[0];
      let imgsrc = showimg.src;
      small.src = imgsrc;
      let bigsrc = showimg.getAttribute("data-img");
      bigImg.src = bigsrc;
      this.className = "selected";
    }
  }
  
  content.onmousemove = function (e) {
     
     
    let evt = window.event||e;

    larger.style.display = "block";
    shadow.style.display = "block";
    let clientX = parseInt(evt.clientX);
    let clientY = parseInt(evt.clientY);
    
    // clientX未计入scroll的值，需考虑scroll的值，当然也可以直接使用pageX代替
    let scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    scrollLeft = parseInt(scrollLeft)
    let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    scrollTop = parseInt(scrollTop)

    let X = clientX + scrollLeft - chooseMarginL - shadow.offsetWidth/2;
    let Y = clientY + scrollTop - chooseMarginT - shadow.offsetHeight/2;

     // 考虑鼠标在被放大区域的最大值
    maxX = contentW - shadow.offsetWidth
    maxY = contentH - shadow.offsetHeight

    if(X<=0){
     
      X = 0;}
    if(X>=maxX){
     
     X = maxX;}
    if(Y<=0){
     
     Y = 0;}
    if(Y>=maxY){
     
      Y = maxY;}
    // 防止遮罩层粘滞，跟随鼠标一起滑出大图位置
    let bigX = X * bigImgW/contentW;
    let bigY = Y * bigImgH/contentH;


    // 优于方法图形和shadow的宽高比例不一致，防止出现空白，需要控制放大后的最大位置
    if (bigY > bigImgH - largerH){
     
     bigY = bigImgH - largerH}
    if (bigX > bigImgW - largerW){
     
     bigX = bigImgW - largerW}
    
    // bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系，放大图和原图之间也有两倍关系
    shadow.style.left = X+"px";
    shadow.style.top = Y+"px";
    console.log(X,Y,bigX,bigY)

    bigImg.style.left = -bigX+"px";
    bigImg.style.top = -bigY+"px";

  }
</script>

</html>

HTML+CSS+JS实例——商品展示图片切换及放大镜功能实现

猜你喜欢