当前位置:Gxl网 > 互联网 > 图片放大,发大镜效果

图片放大,发大镜效果

时间:2021-07-01 10:21:17 帮助过:1人阅读

//             html部分


  

    

  

  

//         css部分

.fdj{
  width:100vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  }
.left{
  width: 540px;
  height: 810px;
  background-image: url(1.jpg);
  background-size: 100% 100%;
  position: relative;
}
.zhezhao{
  display: none;
  width: 270px;
  height: 300px;
  background: rgba(255,255,0,0.7);
  position: absolute;
}
.right {
  width: 540px;
  height: 540px;
  display: none;
  background-image: url(1.jpg);
  background-size: 1080px 1620px;
  background-position: 0 0;
}

//          js部分

  var fdj = document.querySelector(‘.fdj‘)
  var left = document.querySelector(‘.left‘);
  var right = document.querySelector(‘.right‘);
  var zhezhao = document.querySelector(‘.zhezhao‘)
  left.onmouseenter = function(){
  zhezhao.style.display = ‘block‘
  right.style.display = ‘block‘
  }
  left.onmouseleave = function(){
  zhezhao.style.display = ‘none‘
  right.style.display = ‘none‘
  }
  left.onmousemove = function(e){
  //console.log(e);
  var getX = e.pageX - 135 - fdj.offsetLeft;
  var getY = e.pageY -150 -fdj.offsetTop;
  if(getX<0){
  getX = 0
  }
  if(getX>270){
  getX = 270
  }
  if(getY < 0 ){
  getY = 0
  }
  if(getY > 500){
  getY= 500
  }
  zhezhao.style.left = getX+‘px‘;
  zhezhao.style.top = getY+ ‘px‘
  right.style.backgroundPosition = (-getX*2)+"px " +(-getY*2)+‘px‘
  }