js实现电商放大镜效果

最新推荐文章于 2024-07-08 16:22:29 发布

xinyinaini

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量84

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xinyinaini/article/details/126211530

版权

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>放大镜效果</title>
  <link rel="stylesheet" href="css.css">
  <script src='./js.js'></script>
</head>
<body>
  <div class="zoom">
    <!-- 小图 -->
    <div class="small-img">
      <img src="./images/small01.jpg">
      <div class="ball"></div>
      <div class="mask"></div>
    </div>
    <!-- 收略图 -->
    <ul class="thum">
        <li><img src-data='./images\small01.jpg' src="./images/thum01.jpg" alt="thum-img"></li>
        <li><img src-data='./images\small02.jpg' src="./images/thum02.jpg" alt="thum-img"></li>
        <li><img src-data='./images\small03.jpg' src="./images/thum03.jpg" alt="thum-img"></li>
        <li><img src-data='./images\small04.jpg' src="./images/thum04.jpg" alt="thum-img"></li>
        <li><img src-data='./images\small05.jpg' src="./images/thum05.jpg" alt="thum-img"></li>
    </ul>
    <!-- 大图 -->
    <div class="big-img">
      <img src="./images/big01.jpg">
    </div>
  </div>
  
</body>
</html>

CSS部分

*{
  margin:0;
  padding:0;
}
.zoom{
  width:350px;
  height:450px;
  position:relative;
}
.small-img img{
  width:100%;
  height:100%; 
  display:block;
  border:none;
  position:relative;
}
.small-img .ball{
  width:150px;
  height:150px;
  background-color: rgba(0,0,255,.5);
  /* opacity: .3;
  background-color: #00f;
  filter: alpha(opacity=30);  */
  position: absolute;
  left: 0;
  top: 0;
  display:none
}
.mask{
   cursor:move;
}
.small-img .mask{
  width:100%;
  height:100%;
  position:absolute;
  left:0; 
  top:0;
}
/* 收略图 */
 .thum{
  overflow:hidden;
}
.thum li{
  width:18%;
  list-style:none;
  float:left;
  margin-right:3px;
  text-align:center;
  border: 2px solid transparent ;
}
.thum li:last-child{
  margin-right:0;
}
.thum li:hover{
  border: 2px solid #f00;
}
/* 大图 */
.big-img{
  width: 350px;
  height: 450px;
  position: absolute;
  left: 360px;
  top: 0;
  overflow: hidden;
  display: none;
}
.big-img img{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

JS部分

window.onload = function(){
    //获取dom封装
    function $(NaneClass){
      return document.getElementsByClassName(NaneClass)[0];
    }
    //获取dom
    var small = $('small-img')
    var small_img =$('small-img').getElementsByTagName('img')[0];
    var thum_img = $('thum').getElementsByTagName('img');
    var big_img = $('big-img').getElementsByTagName('img')[0];
    var ball = $('ball')
    var big= $('big-img')
    //缩略图切换
    for(var i=0;i<thum_img.length;i++){
      thum_img[i].onmouseover = function(){
        // small_img.setAttribute('src',this.getAttribute('src-data'))
        var thum_src = this.getAttribute('src')
        var idx = thum_src.substr(thum_src.length -5,1)
        small_img.src = './images/small0'+idx+'.jpg'
        big_img.src = './images/big0'+idx+'.jpg'
      }
    }
      //显示隐藏放大镜
      small.onmousemove = function(e){
        ball.style.display = 'block'
        big.style.display = 'block'
      // 获取鼠标的坐标
    var mouseX = (e.offsetX || e.layerX) - ball.offsetWidth / 2
    var mouseY = (e.offsetY || e.layerY) - ball.offsetHeight / 2
      //越界处理
      if(mouseX<0){
        mouseX = 0
      }
      else if(mouseX>=small.offsetWidth - ball.offsetWidth){
          mouseX = small.offsetWidth - ball.offsetwidth
      }
      if(mouseY<0){
        mouseY = 0
      }
      else if(mouseY>=small.offsetHeight - ball.offsetHeight){
          mouseY= small.offsetHeight - ball.offsetHeight
      }

      //更改放大镜的位置
      ball.style.left =mouseX+'px'
      ball.style.top =mouseY+'px'
      //改变大图的位置
      big_img.style.left =mouseX * -2.3+'px'
      big_img.style.top =mouseY * -2.3+'px'
      //鼠标离开时放大镜大图隐藏  
      small.onmouseout = function(){
        ball.style.display = 'none'
        big.style.display = 'none'  
    }
  }
}