집 > 기사 > 웹 프론트엔드 > 돋보기 효과를 구현한 JavaScript의 예

돋보기 효과를 구현한 JavaScript의 예

黄舟원래의: 2017-11-24 09:40:001633검색

저는 여러분이 돋보기 효과에 대해 별로 익숙하지 않다고 생각합니다. 우리 개발에서는 특히 개발자 몰과 같이 돋보기 효과가 일반적으로 사용되는 프로젝트에서 돋보기 효과를 얻기 위해 JavaScript를 자주 사용합니다. JavaScript를 사용하여 돋보기 효과를 얻는 간단한 예를 소개하겠습니다.

아이디어:

먼저 이동 블록과 bimg 블록을 숨깁니다. 마우스가 상자로 이동하면 이동 블록과 bimg 블록이 표시되도록 하고 마우스의 현재 위치를 가져온 다음 이동 블록과 bimg block. 적절한 값을 사용하면 돋보기 효과를 얻을 수 있습니다. (이동 블록 및 bimg 블록의 위치 계산은 나중에 자세히 설명합니다.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>放大镜</title>
  <link href="css/bigimg.css" rel="stylesheet" />
  <script src="js/bigimg.js"></script>
</head>
<body onload="bigimg()">
  <p id="box">
    <img src="images/simg.jpg" alt="#">
    <p id="move"></p>
    <p id="bimg">
      <img id="b_bimg" src="images/bimg.jpg" alt="#">
    </p>
  </p>
</body>
</html>

css 스타일:

*{
  margin:0px;
  padding:0px;
}
#box{
  width:430px;
  height:430px;
  margin:100px;
  margin-left:17%;
  position:relative;//这里使用相对定位，好让其他的元素能依靠这个元素定位
}
#move{
  background-image:url(../images/move.png);
  width:220px;
  height:220px;
  position:absolute;
  left:0px;
  top:0px;
  display:none;//先让他隐藏，用js使其显示
}
#bimg{
  width:430px;
  height:430px;
  overflow:hidden;
  position:absolute;
  top:0px;
  left:450px;
  display:none;//先让他隐藏，用js使其显示
}
#bimg img{
  width:800px;
  height:800px;
  position:absolute;
  top:0px;
  left:0px;
}

Javascript:

function bigimg(){
  var bbox = document.getElementById("box");
  var bmove = document.getElementById("move");
  var bbimg = document.getElementById("bimg");
  var b_bimg = document.getElementById("b_bimg");
  bbox.onmouseover = function(){//鼠标移动到box上显示大图片和选框
    bbimg.style.display = "block";
    bmove.style.display="block";
  }
  bbox.onmouseout = function(){//鼠标移开box不显示大图片和选框
    bbimg.style.display = "none";
    bmove.style.display="none";
  }
  bbox.onmousemove = function(e){//获取鼠标位置
    var x = e.clientX;//鼠标相对于视口的位置
    var y = e.clientY;
    var t = bbox.offsetTop;//box相对于视口的位置
    var l = bbox.offsetLeft;
    var _left = x - l - bmove.offsetWidth/2;//计算move的位置
    var _top = y - t -bmove.offsetHeight/2;
    if(_top<=0)//滑到box的最顶部
      _top = 0;
    else if(_top>=bbox.offsetHeight-bmove.offsetHeight)//滑到box的最底部
      _top = bbox.offsetHeight-bmove.offsetHeight ;
    if(_left<=0)//滑到box的最左边
      _left=0;
    else if(_left>=bbox.offsetWidth-bmove.offsetWidth)//滑到box的最右边
      _left=bbox.offsetWidth-bmove.offsetWidth ;
    bmove.style.top = _top +"px";//设置move的位置
    bmove.style.left = _left + "px";
    var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
    var h = _top/(bbox.offsetHeight-bmove.offsetHeight);
    var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
    var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;
    b_bimg.style.top = -b_bimg_top + "px";//设置大图的位置信息
    b_bimg.style.left = -b_bimg_left + "px";
  }
    
}

렌더링:

1. 이동 블록 계산

검은색 화살표:

var x = e.clientX;//鼠标相对于视口的位置
var y = e.clientY;

빨간색 화살표:

var t = bbox.offsetTop;//box相对于视口的位置
var l = bbox.offsetLeft;

주황색 화살표:

var _left = x - l - bmove.offsetWidth/2;//计算move的位置
var _top = y - t -bmove.offsetHeight/2;

2.bimg 블록 계산

이동 범위 내의 이동 블록 사용 큰 그림의 위치를 설정하는 비율

이동 블록의 이동 범위:

bbox.offsetWidth-bmove.offsetWidth

이동 블록의 현재 좌표와 이동 범위의 비율:

var w = _left/(bbox.offsetWidth-bmove.offsetWidth);//计算移动的比例
var h = _top/(bbox.offsetHeight-bmove.offsetHeight);

이동 범위 bimg:

b_bimg.offsetHeight-bbimg.offsetHeight

bimg의 입장:

var b_bimg_top = (b_bimg.offsetHeight-bbimg.offsetHeight)*h;//计算大图的位置
var b_bimg_left = (b_bimg.offsetWidth-bbimg.offsetWidth)*w;

요약:

이 글을 공부하면서 JavaScript의 돋보기 효과에 대해 모두가 더 잘 이해하게 되었다고 생각합니다. 돋보기 효과를 이해하지 못하는 경우 작업에 도움이 되기를 바랍니다.

돋보기 효과를 구현한 JavaScript의 예

관련 기사