在沒給大家做詳細文字說明之前,先跟大家分享一段簡單的jquery實現放大鏡效果代碼,需要的朋友可以直接拿去代碼。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | $( function (){
var mouseX = 0;
var mouseY = 0;
var maxLeft = 0;
var maxTop = 0;
var markLeft = 0;
var markTop = 0;
var perX = 0;
var perY = 0;
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,不然「放大鏡」罩住的小圖區域,和大圖的顯示區域,所顯示的影像訊息,不能保持一致。 (妙味課堂裡講的那個實例,就是沒有保持一至);
好了,以上程式碼還算比較簡單,下面給大家透過文字說明加程式碼的形式來跟大家介紹jquery實現放大鏡效果。
1.1.1 摘要
相信大家都見過或使用過放大鏡效果,甚至實現過該效果,它一般應用於放大查看商品圖片,一些電商網站(例如:凡客,京東商城,阿里巴巴等)都有類似的圖片查看效果。
在接下來的部落格文章中,我們將向大家介紹透過jQuery實現放大鏡效果。
目錄
•實作原理
•mousemove事件
•相對座標
•background-position屬性
•mousewheel事件
1.1.2 正文
實現原理
首先,我們先來解釋放大鏡效果的實現方式:
方法一:準備一張高像素的大圖,當滑鼠放到原圖上,載入顯示大圖的對應位置。
方法二:將原圖片放大,也就是調整原圖的長度和寬度。
上面我們介紹了透過兩種方式來實現放大鏡效果,接下來,我們將以上的兩種方式應用到我們的jQuery插件中。
首先,我們需要一個img元素顯示原圖對象,還需要一個容器作為顯示框;顯示框裡面存放大圖對象。當滑鼠移動到原圖上時,透過對大圖進行絕對定位來顯示對應的部位,實現類似放大鏡的效果。
接下來,讓我們定義Index.html頁面,具體實作如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!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>
|
登入後複製
上面,我們定義了small物件用來顯示原圖,而large物件作為一個顯示框用來顯示大圖的對應位置。
mousemove事件
接下來,我們透過jQuery插件形式來實現放大鏡效果,當滑鼠移動到small物件上方時,就會在large物件中顯示大圖的對應位置,這就涉及到mousemove事件了,所以,我們需要實現mousemove事件的監聽方法(如何定義jQuery插件可以參考《自訂jQuery插件Step by Step》)。
現在,讓我們實作jquery.imagezoom.js外掛吧!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | ;
( function ($) {
$.fn.imageZoom = function (options) {
var native_width = 0,
native_height = 0,
current_width = 0,
current_height = 0,
$small = $( ".small" ),
$large = $( ".large" );
$( ".magnify" ).mousemove( function (e) {
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $small .attr( 'src' );
native_height = image_object.height;
native_width = image_object.width;
current_height = $small .height();
current_width = $small .width();
} else {
var magnify_offset = $(this).offset(),
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$large .fadeIn(100);
} else {
$large .fadeOut(100);
} if ( $large .is( ":visible" )) {
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属性来显示对应的图像部分,具体实现如下:
1 2 3 4 5 | $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),具体实现如下:
1 2 | $( ".magnify" ).bind( 'DOMMouseScroll mousewheel onmousewheel' , function (e) {
});
|
登入後複製
上面,我们实现了兼容不同浏览器的滚轮事件监听方法,接下来,判断滚轮向上或向下也要考虑不同浏览器的兼容性,主流的览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
由于detail和wheelDelta都有两个值表示向上或向下滚动,所以不同浏览器间可以通过以下方式实现兼容,具体实现如下:
1 2 3 4 5 6 | $( ".magnify" ).bind( 'DOMMouseScroll mousewheel onmousewheel' , function (e) {
var e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
});
|
登入後複製
上面,我们已经处理了不同浏览器滚轮监听方法,当用户滚动滚轮时需要动态地修改原图的尺寸,这里我们定义缩放比scaling为0.3,也就是说每当用户滚动一下滚轮原图就按0.3的比例进行缩放,具体实现如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | native_height += (native_height * scaling * delta);
native_width += (native_width * scaling * delta);
$large .css( 'background-size' , native_width + "px " + native_height + "px" );
现在,我们已经实现了通过滚轮对图片进行缩放查看的效果,完整的实现如下:
;
( function ($) {
$.fn.imageZoom = function (options) {
var defaults = {
scaling: 0.3
};
options = $.extend(defaults, options),
native_width = 0,
native_height = 0,
current_width = 0,
current_height = 0,
$small = $( ".small" ),
$large = $( ".large" );
$( ".magnify" ).mousemove( function (e) {
if (!native_width && !native_height) {
var image_object = new Image();
image_object.src = $small .attr( 'src' );
native_height = image_object.height;
native_width = image_object.width;
current_height = $small .height();
current_width = $small .width();
} else {
var magnify_offset = $(this).offset(),
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
$large .fadeIn(100);
} else {
$large .fadeOut(100);
}
if ( $large .is( ":visible" )) {
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' );
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
native_height += (native_height * defaults.scaling * delta);
native_width += (native_width * defaults.scaling * delta);
if (native_height < current_height) {
native_height = current_height;
}
if (native_width < current_width) {
native_width = current_width;
}
var magnify_offset = $(this).offset(),
mx = e.pageX - magnify_offset.left,
my = e.pageY - magnify_offset.top;
$large .css( 'background-size' , native_width + "px " + native_height + "px" );
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实现放大镜效果 ,希望对大家有所帮助。