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. 큰 그림을 따라가는 방법 의 위치 큰 그림을 움직일 때 '돋보기'는?

실제로는 '돋보기'가 어느 정도 움직일 때(특정 값이 아닌 비율임) , 큰 그림도 이것을 동시에 사용합니다. 큰 이미지의 너비와 높이를 곱하면 큰 이미지가 얼마나 이동해야 하는지 계산할 수 있습니다.


2. 디스플레이 영역과 돋보기의 관계는 무엇입니까?
여기서 "돋보기"는 큰 이미지의 표시 영역에 비례해야 하며, 큰 이미지와 작은 이미지의 비례 관계가 동일해야 합니다. 예를 들어, 큰 그림과 작은 그림의 비율은 1:2이고, "돋보기" 영역의 크기도 큰 그림이 표시되는 영역의 크기와 1:2여야 합니다. "돋보기"로 가려진 작은 그림 영역은 큰 그림과 다릅니다. 표시 영역과 표시된 이미지 정보는 일치할 수 없습니다. (Miaowei 강의실에 언급된 예는 일관성이 없습니다.)

온라인 데모:
http://demo.jb51.net/js/2012/mymagnifier/
패키지 다운로드:
http://www.jb51.net/jiaoben/45315.html