基于jQuery實現(xiàn)放大鏡特效
相信大家都見過或使用過放大鏡效果，甚至實現(xiàn)過該效果，它一般應用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。
在接下來的文章中，我們將向大家介紹通過jQuery實現(xiàn)放大鏡效果。
1、實現(xiàn)原理
首先，我們講解一下放大鏡效果的實現(xiàn)方式：
方法一：準備一張高像素的大圖，當鼠標放到原圖上，加載顯示大圖的對應位置。
方法二：對原圖片進行放大，也就是調(diào)整原圖的長和寬。
上面我們介紹了通過兩種方式實現(xiàn)放大鏡效果，接下來，我們將以上的兩種方式應用到我們的jQuery插件中。
首先，我們需要一個img元素顯示原圖對象，還需要一個容器作為顯示框；顯示框里面存放大圖對象。當鼠標移動到原圖上時，通過對大圖進行絕對定位來顯示對應的部位，實現(xiàn)類似放大鏡的效果。
接下來，讓我們定義Index.html頁面，具體實現(xiàn)如下：
<!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對象作為一個顯示框用來顯示大圖的對應位置。
2、mousemove事件
接下來，我們通過jQuery插件形式來實現(xiàn)放大鏡效果，當鼠標移動到small對象上方時，就會在large對象中顯示大圖的對應位置，這就涉及到mousemove事件了，所以，我們需要實現(xiàn)mousemove事件的監(jiān)聽方法（如何定義jQuery插件可以參考《自定義jQuery插件Step by Step》）。
現(xiàn)在，讓我們實現(xiàn)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
});
}
}
});
});
上面，我實現(xiàn)了mousemove事件的監(jiān)聽方法，當鼠標移動到magnify對象中，我們需要獲取當前鼠標的相對坐標位置，下面我們通過圖片講解如何獲取鼠標的相對坐標位置。
3、相對坐標
圖1鼠標相對坐標位置
當鼠標移動到magnify對象中，我們需要獲取鼠標在magnify中的相對坐標位置，這里我們把相對坐標定義為(mx,my)，通過上圖我們知道相對坐標等于(pageX - offsetLeft, pageY - offsetTop)。
現(xiàn)在，我們已經(jīng)獲取鼠標在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對象中就顯示對應位置的大圖部位，接下來我們需要實現(xiàn)大圖的加載實現(xiàn)了。
4、background-position屬性
在實現(xiàn)大圖加載顯示之前，首先介紹CSS中背景定位background-position的知識。
圖2 CSS background-position
上面，有一個100x100像素的圖片它由四種顏色組成，而且每種顏色占50 x50像素，接下來，我們將通過修改該圖片CSS的background-position屬性值來顯示該圖片的不同位置。
我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過修改每個div元素CSS的background-position屬性值實現(xiàn)的。
例如：第一行的藍色方形，我們設置CSS的background-position屬性為：0px -50px;這相當于原圖往上移動50px，第一行的其他方形也通過左右和上下移動實現(xiàn)的。
但第二行的方形就顯得更加奇怪了，因為它們都由四種顏色組成，而且顏色的位置都不一樣，這究竟是怎樣實現(xiàn)的呢？
例如：第二行的第一個方形，我們設置CSS的background-position屬性為：25px 25px;這相當于原圖向下和向右移動了25px，由于image wrap的作用它會填充剩余位置的顏色。
現(xiàn)在，我們已經(jīng)了解到了CSS的background-position屬性的作用，所以我們通過修改large對象的background-position屬性來顯示對應的圖像部分，具體實現(xiàn)如下：
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
上面，我們通過加載大圖的方式來實現(xiàn)放大鏡效果，接下來，我們將介紹通過調(diào)整原圖的長和寬來實現(xiàn)放大鏡效果。
5、mousewheel事件
前面，我們通過mousemove事件來放大圖片，這里我們將通過鼠標的滾輪事件實現(xiàn)圖片放大效果。
由于，不同的瀏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關于這三個事件這里不做詳細的介紹了。
由于不同瀏覽器之間存在著差異，為了實現(xiàn)瀏覽器之間的兼容，所以，我們需要監(jiān)聽以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實現(xiàn)如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});
上面，我們實現(xiàn)了兼容不同瀏覽器的滾輪事件監(jiān)聽方法，接下來，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負數(shù)表示向下。
由于detail和wheelDelta都有兩個值表示向上或向下滾動，所以不同瀏覽器間可以通過以下方式實現(xiàn)兼容，具體實現(xiàn)如下：
$(".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)));
});
上面，我們已經(jīng)處理了不同瀏覽器滾輪監(jiān)聽方法，當用戶滾動滾輪時需要動態(tài)地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說每當用戶滾動一下滾輪原圖就按0.3的比例進行縮放，具體實現(xiàn)如下：
// 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");
現(xiàn)在，我們已經(jīng)實現(xiàn)了通過滾輪對圖片進行縮放查看的效果，完整的實現(xiàn)如下：
(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);
上面，我們實現(xiàn)了放大鏡效果，當我們鼠標停留在圖片上方會自動放大圖片的相應部位，當然我們可以通過滾輪調(diào)整放大的比例。
在本文中，我們介紹了如何實現(xiàn)放大鏡效果，總的來說，我們可以通過兩種方式實現(xiàn)放大鏡效果，而且在文中都給出了詳細的介紹，通過mousemove事件實現(xiàn)加載大圖的效果，mousewheel事件實現(xiàn)動態(tài)修改原圖的尺寸。
這只是一個簡單的程序，我們還有很大的改善空間，提供一個內(nèi)容豐富和功能強大的程序是我們的目標。
以上就是本文的詳細內(nèi)容，希望對大家的學習有所幫助。
- jquery圖片放大鏡效果
- jquery實現(xiàn)放大鏡簡潔代碼(推薦)
- jQuery實現(xiàn)的放大鏡效果示例
- 基于jquery編寫的放大鏡插件
- jQuery實現(xiàn)圖片局部放大鏡效果
- jQuery實現(xiàn)放大鏡效果實例代碼
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- jquery實現(xiàn)圖片放大鏡功能
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- 基于jquery實現(xiàn)放大鏡效果
- 使用jquery實現(xiàn)放大鏡效果
- jquery放大鏡效果超漂亮噢
- jquery圖片放大鏡功能的實例代碼
- 基于jquery的放大鏡效果
- 實現(xiàn)jquery放大鏡的兩種方法
相關文章
使用jQuery mobile NuGet讓你的網(wǎng)站在移動設備上同樣精彩
這篇文章主要介紹了使用jQuery mobile NuGet讓你的網(wǎng)站在移動設備上同樣精彩，使用jQuery mobile NuGet包，改變共享的布局和視圖，并使你的網(wǎng)站在傳統(tǒng)的瀏覽器和大部分手機展現(xiàn)的都很好。,需要的朋友可以參考下2019-06-06
jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現(xiàn)
jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現(xiàn)2010-04-04
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解，其實就和普通JS的用法差不多，只是少了一個on而已第二、三種方法都是綁定事件2013-08-08
本教程將為大家詳細介紹下使用公用方法驗證jquery struts唯一標識，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得總結(jié)【經(jīng)典收藏】
這篇文章主要介紹了15個值得開發(fā)人員關注的jQuery開發(fā)技巧和心得,詳細總結(jié)分析了jQuery常用的開發(fā)技巧,需要的朋友可以參考下2016-05-05
這篇文章主要匯總了20種jQuery 和 CSS 的文本特效插件，都是比較熱門的特效插件，推薦給有需要的小伙伴。2014-12-12
支持多文件上傳的jQuery文件上傳插件Uploadify，目前此插件有兩種版本即Flash版本和HTML5版本，2014-06-06
這篇文章主要介紹了jQuery中delegate()方法用法,實例分析了delegate()方法的功能、定義及為匹配元素的子元素添加一個或多個事件,并規(guī)定當這些事件發(fā)生時運行函數(shù)的使用技巧,需要的朋友可以參考下2015-01-01
下面小編就為大家?guī)硪黄猨Query判斷是否存在滾動條的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了jquery獲取鏈接地址和跳轉(zhuǎn),具體操作步驟大家可查看下文詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08