[script] 이미지 돋보기 효과 스크립트(magnifier)

 

보통 쇼핑몰에 상품 이미지에 마우스 올렸을때

확대되서 돋보기처럼 보이게 하는 효과를 codepen 에서 찾아서 해봤다.

 

예전에 꾸며놨던 티스토리 배경인데 이미지가 있어서

아주 유용하게 잘쓰고 있다 ㅋㅋㅋ

사진 크기 비율을 맞게 하지않아서 세로로 찌그러진 느낌이 있긴한데 

사이즈가 맞는 이미지 잘 구해서 쓰면 괜찮다.

$(document).ready(function () {
	var nativeWidth = 0;
	var nativeHeight = 0;
  $(".content_left").mousemove(function (e) {
    if (!nativeWidth && !nativeHeight) {
      var imgObject = new Image();
      imgObject.src = $(".smallImg").attr("src");
      nativeWidth = imgObject.width;
      nativeHeight = imgObject.height;
    } else
    {
      var magnifyOffset = $(this).offset();
      var mouseX = e.pageX - magnifyOffset.left;
      var mouseY = e.pageY - magnifyOffset.top;

      if (mouseX < $(this).width() && mouseY < $(this).height() && mouseX > 0 && mouseY > 0) {
        $(".magnifier").fadeIn(100);
      } else
      {
        $(".magnifier").fadeOut(100);
      }
      if ($(".magnifier").is(":visible")) {
        var smallImgX = Math.round(mouseX / $(".smallImg").width() * nativeWidth - $(".magnifier").width() / 2) * -1;
        var smallImgY = Math.round(mouseY / $(".smallImg").height() * nativeHeight - $(".magnifier").height() / 2) * -1;
        var bgp = smallImgX + "px " + smallImgY + "px";

        var largeImgX = mouseX - $(".magnifier").width() / 2;
        var largeImgY = mouseY - $(".magnifier").height() / 2;

        $(".magnifier").css({ left: largeImgX, top: largeImgY, backgroundPosition: bgp });
      }
    }
  });
});

<div id="container">
  <div class="content_left">
    <div class="magnifier"></div>
    <img class="smallImg" src="이미지 주소"/>
  </div>
  <div class="content_right">
    <h2>carina16 티스토리</h2>
    <p>script_ex</p>
    <dl>
      <dt>오늘 조회수</dt>
      <dd><strike>100</strike>명</dd>
    </dl>
    <dl>
      <dt>누적 조회수</dt>
      <dd>15,000 명</dd>
    </dl>
  </div>
</div>

 

#container{width:1300px; margin:0 auto; }
.content_left{float:left; position:relative;  width:652px; height:652px; border:1px solid #dfdfdf;}
.content_left .smallImg{display:inline-block; width:100%; height:100%;}


.content_right{float:right; width:530px; padding-top:45px; }
.content_right h2{font-size:36px; color:#444; line-height:1;}
.content_right p{font-size:14px; color:#444; margin-top:10px; padding-bottom:20px; border-bottom:1px solid #dfdfdf;}
.content_right dl{display:table; table-layout:fixed; width:100%;}
.content_right dl:nth-of-type(1){margin-top:20px;}
.content_right dl + dl{margin-top:10px;}
.content_right dl dt{display:table-cell; vertical-align:top; width:30%; font-size:15px; color:#444; font-weight:bold; }
.content_right dl dd{display:table-cell; vertical-align:top; width:70%;  font-size:15px; color:#444; font-weight:bold;}


.magnifier {
	width: 175px; 
	height: 175px;
	border:1px solid red;
	position: absolute;
	border-radius: 100%;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
	0 0 7px 7px rgba(0, 0, 0, 0.25), 
	inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
	background: url('이미지 주소') no-repeat;
	display: none;
	z-index:100;
}

.magnifier가 저 돋보기 인데 div따로 만들고 css로도 설정해 줘야한다

css background로 이미지를 다시한번 넣어줘야 함!!