jquery_jquery를 기반으로 한 돋보기 효과

$(function(){
var mouseX = 0; //마우스 이동 위치 Bottom
var markLeft = 0; //돋보기 이동의 왼쪽 거리
var markTop = 0; 돋보기 이동
var perX = 0; //X 이동 비율
var perY = 0; //이동한 Y 비율
var bigLeft = 0; //큰 그림이 왼쪽으로 이동하는 데 필요한 거리
var bigTop = 0; //큰 그림이 위로 이동해야 하는 거리
//돋보기 위치 변경
function updataMark($mark){
//판단을 통해 작은 프레임은 작은 그림 영역에서만 이동할 수 있습니다
if(markLeft<0){
markLeft = 0
}else if(markLeft>maxLeft){
markLeft = maxLeft; 🎜>
if(markTop<0){
markTop = 0;
}else if(markTop> maxTop){
markTop = maxTop;
//움직이기 돋보기의 비율, 즉 해당 영역에서 이 작은 상자의 이동 비율
perX = markLeft/$(".small").outerWidth ()
perY = markTop/$(".small ").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY* $(".big").outerHeight();
//작은 상자의 위치 설정
$mark.css({"left":markLeft,"top":markTop,"display":"block "})
}
//변경 큰 그림의 위치
function updataBig(){
$(".big").css({"display":"block","left ":bigLeft,"top":bigTop});
}
//마우스가 밖으로 나갈 때
function cancle(){
$(".big").css({"display": "none"})
$ (".mark").css({"display":"none"})
}
//썸네일 위에서 마우스를 움직일 때
function imgMouseMove(event){
var $ this = $(this);
var $mark = $(this).children(".mark")
//작은 그림에서 마우스의 위치
mouseX = event.pageX- $this.offset().left - $mark.outerWidth()/2;
mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2 ; 최대값
maxLeft =$this.width()- $mark.outerWidth()
maxTop =$this.height()- $mark.outerHeight()
markLeft = mouseX; markTop = mouseY;
updataMark($mark);
updataBig();
}

$(".small").bind("mousemove", imgMouseMove).bind(" mouseleave",cancle);
})



여기에는 두 가지 요점이 있습니다


1. 큰 그림을 따라가는 방법 의 위치 큰 그림을 움직일 때 '돋보기'는?