放大镜案例（html/css/js）

最新推荐文章于 2023-09-23 17:32:36 发布

千寒33

最新推荐文章于 2023-09-23 17:32:36 发布

阅读量149

点赞数

分类专栏：练习文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/weixin_52120405/article/details/123773965

版权

练习专栏收录该内容

15 篇文章 1 订阅

订阅专栏

实例效果为淘宝、京东等购买物品查看图片细节效果

HTML

<body>
  <div class="zoom">
    <!-- 小图 -->
    <div class="small-img">
      <img src="images/small01.jpg" alt="small-img">
      <div class="ball"></div>
      <div class="mask"></div>
    </div>
    <!-- 缩略图 -->
    <ul class="thum">
      <li><img src="images/thum01.jpg" alt="thum-img"></li>
      <li><img src="images/thum02.jpg" alt="thum-img"></li>
      <li><img src="images/thum03.jpg" alt="thum-img"></li>
      <li><img src="images/thum04.jpg" alt="thum-img"></li>
      <li><img src="images/thum05.jpg" alt="thum-img"></li>
    </ul>
    <!-- 大图 -->
    <div class="big-img">
      <img src="images//big01.jpg" alt="big-img">
    </div>
  </div>
</body>

CSS

*{
  padding: 0;
  margin: 0;
}
.zoom{
  width: 350px;
  height: 450px;
}
/* 小图 */
.small-img{
  width: 100%;
  height: 100%;
  display: block;
  border: none;/*去掉IE低版本蓝色边框*/
  position: relative;
}
.small-img img{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.small-img .ball{
  width: 150px;
  height: 150px;
  position: absolute;
  /* background-color: rgba(0, 0, 255, .5); */
  background-color: #00f;
  opacity: .3;
  filter: alpha(opacity=30); /* 兼容IE9以下的版本 */
  left: 100;
  top: 100;
  display: none;
  /* cursor: pointer; */
}
.small-img .mask{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: move;
}
/* 缩略图 */
.thum{
  overflow: hidden;
}
.thum li{
  list-style: none;
  width: 18%;
  float: left;
  margin-right: 3px;
  text-align: center;
  border: 1px solid transparent;/*透明色*/
  cursor: pointer;
}
.thum li:last-child{
  margin-right: 0;
}
.thum li:hover{
  border: 1px solid red;
}
/* 大图 */
.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;
}

window.onload=function(){
  // 封装DOM
  var $=function(className){
    return document.getElementsByClassName(className)[0];
  }
  // 获取DOM
  var smallImg=$('small-img'),//小图
      smallPic=smallImg.getElementsByTagName('img')[0],
      ball=$('ball'),//控制
      bigImg=$('big-img'),//大图
      bigPic=bigImg.getElementsByTagName('img')[0],
      thums=$('thum').getElementsByTagName('li');//缩略图
  // console.log(thums)
  
  // 点击缩略图,改变小图和大图与缩略图匹配
  for(var i=0,len=thums.length;i<len;i++){
    thums[i].onmouseenter=function(){
      
      var thumSrc=this.getElementsByTagName('img')[0].src;
      // console.log(thumSrc)
      // 取出图片中的非零数字
      var idx=thumSrc.substr(thumSrc.length-5,1);
      
      smallPic.src='images/small0'+idx+'.jpg';
      bigPic.src='images/big0'+idx+'.jpg';
    }
  }

  //设置放大镜
  smallImg.onmousemove=function(e){
    var e=e||window.event;//兼容处理

    // console.log(e)

    //鼠标移动到小图上显示放大镜和大图
    bigImg.style.display='block';
    ball.style.display='block';

    //获取鼠标的坐标
    // console.log(ball)
    var mouseX=(e.offsetX||e.layerX)-ball.offsetWidth/2;
    var mouseY=(e.offsetY||e.layerY)-ball.offsetHeight/2;
    // console.log(mouseX)

    //越界处理
    if(mouseX<0){
      mouseX=0
    }else if(mouseX>=smallImg.clientWidth-ball.offsetWidth){
      mouseX=smallImg.clientWidth-ball.offsetWidth;
    }
    if(mouseY<0){
      mouseY=0
    }else if(mouseY>=smallImg.clientHeight-ball.offsetHeight){
      mouseY=smallImg.clientHeight-ball.offsetHeight;
    }

    //更改放大镜位置
    ball.style.left=mouseX+'px';
    ball.style.top=mouseY+'px';

    //更改大图的位置
    bigPic.style.left=mouseX*-2.3+'px'// -2.3 负号表示反向，2.3表示大图是小图的2.3倍
    bigPic.style.top=mouseY*-2.3+'px'
  }
  smallImg.onmouseleave=function(){
    //鼠标离开小图上不显示放大镜和大图
    bigImg.style.display='none';
    ball.style.display='none';
  }
}

千寒33

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜案例（html/css/js）

实例效果为淘宝、京东等购买物品查看图片细节效果HTML<body> <div class="zoom">  <div class="small-img"> <img src="images/small01.jpg" alt="small-img"> <div class="ball"></div> <div class="mask"
复制链接

扫一扫