돋보기 효과 예제 code_jquery의 jQuery 구현
- WBOY원래의
- 2016-05-16 15:10:371406검색
자세한 설명을 하기 전에 돋보기 효과를 얻을 수 있는 간단한 jquery 코드를 알려드리겠습니다. 필요한 친구는 코드를 직접 얻을 수 있습니다.
$(function(){
var mouseX = 0; //鼠标移动的位置X
var mouseY = 0; //鼠标移动的位置Y
var maxLeft = 0; //最右边
var maxTop = 0; //最下边
var markLeft = 0; //放大镜移动的左部距离
var markTop = 0; //放大镜移动的顶部距离
var perX = 0; //移动的X百分比
var perY = 0; //移动的Y百分比
var bigLeft = 0; //大图要移动left的距离
var bigTop = 0; //大图要移动top的距离
//改变放大镜的位置
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여야 합니다. "돋보기"로 가려진 작은 그림 영역은 큰 그림과 다릅니다. 표시 영역과 표시된 이미지 정보는 일치할 수 없습니다. (훌륭한 맛 수업에서 언급된 예는 일관성이 없습니다);
자, 위의 코드는 비교적 간단합니다. 텍스트 설명과 코드를 통해 돋보기 효과를 얻을 수 있는 jquery를 소개하겠습니다.
1.1.1 요약
돋보기 효과는 누구나 보거나 사용해 본 적이 있거나 심지어 달성한 적이 있을 것입니다. 일반적으로 일부 전자상거래 웹사이트(예: Fanke, Jingdong Mall, Alibaba 등)에서도 비슷한 효과가 사용됩니다. 효과. 그림 보기 효과.
다음 블로그 포스팅에서는 jQuery를 통한 돋보기 효과에 대해 소개해드리겠습니다.
목차
•실행원리
•마우스무브 이벤트
•상대좌표
•배경 위치 속성
•마우스휠 이벤트
1.1.2 텍스트
실행원리
먼저 돋보기 효과를 얻는 방법을 설명하겠습니다.
방법 1: 픽셀이 높은 큰 이미지를 준비합니다. 원본 이미지 위에 마우스를 놓으면 큰 이미지의 해당 위치를 로드하여 표시합니다.
방법 2: 원본 이미지를 확대합니다. 즉, 원본 이미지의 길이와 너비를 조정합니다.
위에서는 돋보기 효과를 얻기 위한 두 가지 방법을 소개했습니다. 다음으로 위의 두 가지 방법을 jQuery 플러그인에 적용합니다.
먼저 원본 이미지 객체를 표시하려면 img 요소가 필요하고, 표시 상자에 큰 이미지 객체가 저장되는 컨테이너가 필요합니다. 원본 이미지 위로 마우스를 이동하면 큰 이미지의 절대 위치 지정으로 해당 부분이 표시되어 돋보기와 같은 효과를 얻을 수 있습니다.
다음으로 Index.html 페이지를 정의해 보겠습니다. 구체적인 구현은 다음과 같습니다.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery Image Zoom Demo</title> <meta name="author" content="Jackson Huang"> </head> <body> <div class="magnify"> <div class="large"></div> <img class="small" src="./img/1.jpg" width="700" /> </div> </body> </html>
위에서는 원본 이미지를 표시하기 위한 작은 객체를 정의하고, 큰 이미지의 해당 위치를 표시하기 위한 표시 상자로 큰 객체를 정의했습니다.
마우스무브 이벤트
다음으로, 돋보기 효과를 얻기 위해 jQuery 플러그인을 사용합니다. 마우스가 작은 개체 위로 이동하면 큰 이미지의 해당 위치가 큰 개체에 표시되므로 mousemove 이벤트가 발생합니다. mousemove 이벤트에 대한 청취 방법을 구현해야 합니다(jQuery 플러그인을 정의하는 방법은 "jQuery 플러그인 단계별 사용자 정의"를 참조하십시오).
이제 jquery.imagezoom.js 플러그인을 구현해 보겠습니다!
;
(function ($) {
$.fn.imageZoom = function (options) {
// The native width and height of the image.
var native_width = 0,
native_height = 0,
current_width = 0,
current_height = 0,
$small = $(".small"),
$large = $(".large");
$(".magnify").mousemove(function (e) {
/* Act on the event */
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $small.attr('src');
// Gets the image native height and width.
native_height = image_object.height;
native_width = image_object.width;
// Gets the image current height and width.
current_height = $small.height();
current_width = $small.width();
} else {
// Gets .maginfy offset coordinates.
var magnify_offset = $(this).offset(),
// Gets coordinates within .maginfy.
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
// Checks the mouse within .maginfy or not.
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$large.fadeIn(100);
} else {
$large.fadeOut(100);
} if ($large.is(":visible")) {
/* Gets the large image coordinate by ratio
small.x / small.width = large.x / large.width
small.y / small.height = large.y / large.height
then we need to keep pointer in the centre,
so deduct the half of .large width and height.
*/
var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
bgp = rx + "px " + ry + "px",
px = mx - $large.width() / 2,
py = my - $large.height() / 2;
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
}
}
});
});
上面，我实现了mousemove事件的监听方法，当鼠标移动到magnify对象中，我们需要获取当前鼠标的相对坐标位置，下面我们通过图片讲解如何获取鼠标的相对坐标位置。
相对坐标
图1鼠标相对坐标位置
当鼠标移动到magnify对象中，我们需要获取鼠标在magnify中的相对坐标位置，这里我们把相对坐标定义为(mx,my)，通过上图我们知道相对坐标等于(pageX - offsetLeft, pageY - offsetTop)。
现在，我们已经获取鼠标在magnify对象中的坐标值，接下来，需要获取对应大图的相应坐标，这里我们把大图的对应坐标定义为(rx,ry)，我们可以通过比例关系获取(rx,ry)的值。
mx / small.width （原图的宽）= rx / native_width（大图的宽）
my / small.height （原图的长）= ry / native_height（大图的长）
通过上面的比例关系，我们知道大图的坐标(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。
通过上述的公式，我们可以获取大图对应坐标位置，当鼠标移动到magnify对象中就显示对应位置的大图部位，接下来我们需要实现大图的加载实现了。
background-position属性
在实现大图加载显示之前，首先介绍CSS中背景定位background-position的知识。
图2 CSS background-position
上面，有一个100x100像素的图片它由四种颜色组成，而且每种颜色占50 x50像素，接下来，我们将通过修改该图片CSS的background-position属性值来显示该图片的不同位置。
我们看到在大正方形下有两行小正方形，它们显示的颜色位置都不相同，这里我们通过修改每个div元素CSS的background-position属性值实现的。
例如：第一行的蓝色方形，我们设置CSS的background-position属性为：0px -50px;这相当于原图往上移动50px，第一行的其他方形也通过左右和上下移动实现的。
但第二行的方形就显得更加奇怪了，因为它们都由四种颜色组成，而且颜色的位置都不一样，这究竟是怎样实现的呢？
例如：第二行的第一个方形，我们设置CSS的background-position属性为：25px 25px;这相当于原图向下和向右移动了25px，由于image wrap的作用它会填充剩余位置的颜色。
现在，我们已经了解到了CSS的background-position属性的作用，所以我们通过修改large对象的background-position属性来显示对应的图像部分，具体实现如下：
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
上面，我们通过加载大图的方式来实现放大镜效果，接下来，我们将介绍通过调整原图的长和宽来实现放大镜效果。
mousewheel事件
前面，我们通过mousemove事件来放大图片，这里我们将通过鼠标的滚轮事件实现图片放大效果。
由于，不同的浏览器有不同的滚轮事件。主要是有三种：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），关于这三个事件这里不做详细的介绍了。
由于不同浏览器之间存在着差异，为了实现浏览器之间的兼容，所以，我们需要监听以上三种滚轮事件（onmousewheel，mousewheel和DOMMouseScroll），具体实现如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});
上面，我们实现了兼容不同浏览器的滚轮事件监听方法，接下来，判断滚轮向上或向下也要考虑不同浏览器的兼容性，主流的览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致，detail与wheelDelta只各取两个值，detail只取±3，wheelDelta只取±120，其中正数表示为向上，负数表示向下。
由于detail和wheelDelta都有两个值表示向上或向下滚动，所以不同浏览器间可以通过以下方式实现兼容，具体实现如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
// cross-browser wheel delta
var e = window.event || e; // old IE support.
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
});
上面，我们已经处理了不同浏览器滚轮监听方法，当用户滚动滚轮时需要动态地修改原图的尺寸，这里我们定义缩放比scaling为0.3，也就是说每当用户滚动一下滚轮原图就按0.3的比例进行缩放，具体实现如下：
// Gets the image scaling height and width.
native_height += (native_height * scaling * delta);
native_width += (native_width * scaling * delta);
// Update backgroud image size.
$large.css('background-size', native_width + "px " + native_height + "px");
现在，我们已经实现了通过滚轮对图片进行缩放查看的效果，完整的实现如下：
/***********************************
* Author: Jackson Huang
* Blog: http://www.cnblogs.com/rush
* Date: 8/23/2013
* Reference:
* http://www.sitepoint.com/html5-javascript-mouse-wheel/
* http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
***********************************/
;
(function($) {
$.fn.imageZoom = function(options) {
// The native width and height of the image.
var defaults = {
scaling: 0.3
};
// Combines object defaults and options.
options = $.extend(defaults, options),
native_width = 0,
native_height = 0,
current_width = 0,
current_height = 0,
$small = $(".small"),
$large = $(".large");
$(".magnify").mousemove(function(e) {
/* Act on the event */
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $small.attr('src');
// Gets the image native height and width.
native_height = image_object.height;
native_width = image_object.width;
// Gets the image current height and width.
current_height = $small.height();
current_width = $small.width();
} else {
// Gets .maginfy offset coordinates.
var magnify_offset = $(this).offset(),
// Gets coordinates within .maginfy.
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
// Checks the mouse within .maginfy or not.
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$large.fadeIn(100);
} else {
$large.fadeOut(100);
}
if ($large.is(":visible")) {
/* Gets the large image coordinate by ratio
small.x / small.width = large.x / large.width
small.y / small.height = large.y / large.height
then we need to keep pointer in the centre,
so deduct the half of .large width and height.
*/
var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
bgp = rx + "px " + ry + "px",
px = mx - $large.width() / 2,
py = my - $large.height() / 2;
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
}
}
});
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
var image_object = new Image();
image_object.src = $large.attr('src');
// cross-browser wheel delta
e = window.event || e; // old IE support.
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Gets the image scaling height and width.
native_height += (native_height * defaults.scaling * delta);
native_width += (native_width * defaults.scaling * delta);
// The image can't smaller than the original.
if (native_height < current_height) {
native_height = current_height;
}
if (native_width < current_width) {
native_width = current_width;
}
// console.log("native_height: " + native_height + " native_width: " + native_width);
// Gets .maginfy offset coordinates.
var magnify_offset = $(this).offset(),
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
// Update backgroud image size.
$large.css('background-size', native_width + "px " + native_height + "px");
/* Gets the large image coordinate by ratio
small.x / small.width = large.x / large.width
small.y / small.height = large.y / large.height
then we need to keep pointer in the centre,
so deduct the half of .large width and height.
*/
var rx = Math.round(mx / $small.width() * native_width - $large.width() / 2) * -1,
ry = Math.round(my / $small.height() * native_height - $large.height() / 2) * -1,
bgp = rx + "px " + ry + "px",
px = mx - $large.width() / 2,
py = my - $large.height() / 2;
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
});
};
})(jQuery);
图3 放大镜效果
上面，我们实现了放大镜效果，当我们鼠标停留在图片上方会自动放大图片的相应部位，当然我们可以通过滚轮调整放大的比例。
1.1.3 总结
在本博文中，我们介绍了如何实现放大镜效果，总的来说，我们可以通过两种方式实现放大镜效果，而且在博文中都给出了详细的介绍，通过mousemove事件实现加载大图的效果，mousewheel事件实现动态修改原图的尺寸。
这只是一个简单的程序，我们还有很大的改善空间，提供一个内容丰富和功能强大的程序是我们的目标。
以上内容给大家介绍了jQuery实现放大镜效果 ，希望对大家有所帮助。