jQuery實(shí)現(xiàn)放大鏡效果實(shí)例代碼
在沒(méi)給大家做詳細(xì)文字說(shuō)明之前，先給大家分享一段簡(jiǎn)單的jquery實(shí)現(xiàn)放大鏡效果代碼，需要的朋友可以直接拿去代碼。
$(function(){
var mouseX = 0; //鼠標(biāo)移動(dòng)的位置X
var mouseY = 0; //鼠標(biāo)移動(dòng)的位置Y
var maxLeft = 0; //最右邊
var maxTop = 0; //最下邊
var markLeft = 0; //放大鏡移動(dòng)的左部距離
var markTop = 0; //放大鏡移動(dòng)的頂部距離
var perX = 0; //移動(dòng)的X百分比
var perY = 0; //移動(dòng)的Y百分比
var bigLeft = 0; //大圖要移動(dòng)left的距離
var bigTop = 0; //大圖要移動(dòng)top的距離
//改變放大鏡的位置
function updataMark($mark){
//通過(guò)判斷，讓小框只能在小圖區(qū)域中移動(dòng)
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}
if(markTop<0){
markTop = 0;
}else if(markTop>maxTop){
markTop = maxTop;
}
//獲取放大鏡的移動(dòng)比例，即這個(gè)小框在區(qū)域中移動(dòng)的比例
perX = markLeft/$(".small").outerWidth();
perY = markTop/$(".small").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY*$(".big").outerHeight();
//設(shè)定小框的位置
$mark.css({"left":markLeft,"top":markTop,"display":"block"});
}
//改變大圖的位置
function updataBig(){
$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
}
//鼠標(biāo)移出時(shí)
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠標(biāo)小圖上移動(dòng)時(shí)
function imgMouseMove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠標(biāo)在小圖的位置
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);
})
需要注意這個(gè)里面主要有二點(diǎn)
1.如何大圖跟隨"放大鏡"的位置，同時(shí)移動(dòng)大圖?
其實(shí)就是用到一個(gè)比例關(guān)系，當(dāng)“放大鏡”移動(dòng)多少比例（是比例，不是具體值），大圖也同時(shí)用這個(gè)比例去乘以大圖的寬和高，就可以算出大圖該移動(dòng)多少距離了；
2.顯示區(qū)域和放大鏡的關(guān)系？
這里的“放大鏡”應(yīng)該和大圖的顯示區(qū)域的比例，應(yīng)該是大圖和小的比例關(guān)系一樣。比如大圖和小圖的比例是1:2，那個(gè)“放大鏡”區(qū)域的大小，和顯示大圖區(qū)域的大小比例也應(yīng)該是1:2，不然“放大鏡”罩住的小圖區(qū)域，和大圖的顯示區(qū)域，所顯示的圖像信息，不能保持一致。（妙味課堂里講的那個(gè)實(shí)例，就是沒(méi)有保持一至）;
好了，以上代碼還算比較簡(jiǎn)單，下面給大家通過(guò)文字說(shuō)明加代碼的形式給大家介紹jquery實(shí)現(xiàn)放大鏡效果。
1.1.1 摘要
相信大家都見(jiàn)過(guò)或使用過(guò)放大鏡效果，甚至實(shí)現(xiàn)過(guò)該效果，它一般應(yīng)用于放大查看商品圖片，一些電商網(wǎng)站（例如：凡客，京東商城，阿里巴巴等）都有類似的圖片查看效果。
在接下來(lái)的博文中，我們將向大家介紹通過(guò)jQuery實(shí)現(xiàn)放大鏡效果。
目錄
•實(shí)現(xiàn)原理
•mousemove事件
•相對(duì)坐標(biāo)
•background-position屬性
•mousewheel事件
1.1.2 正文
實(shí)現(xiàn)原理
首先，我們講解一下放大鏡效果的實(shí)現(xiàn)方式：
方法一：準(zhǔn)備一張高像素的大圖，當(dāng)鼠標(biāo)放到原圖上，加載顯示大圖的對(duì)應(yīng)位置。
方法二：對(duì)原圖片進(jìn)行放大，也就是調(diào)整原圖的長(zhǎng)和寬。
上面我們介紹了通過(guò)兩種方式實(shí)現(xiàn)放大鏡效果，接下來(lái)，我們將以上的兩種方式應(yīng)用到我們的jQuery插件中。
首先，我們需要一個(gè)img元素顯示原圖對(duì)象，還需要一個(gè)容器作為顯示框；顯示框里面存放大圖對(duì)象。當(dāng)鼠標(biāo)移動(dòng)到原圖上時(shí)，通過(guò)對(duì)大圖進(jìn)行絕對(duì)定位來(lái)顯示對(duì)應(yīng)的部位，實(shí)現(xiàn)類似放大鏡的效果。
接下來(lái)，讓我們定義Index.html頁(yè)面，具體實(shí)現(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對(duì)象用于顯示原圖，而large對(duì)象作為一個(gè)顯示框用來(lái)顯示大圖的對(duì)應(yīng)位置。
mousemove事件
接下來(lái)，我們通過(guò)jQuery插件形式來(lái)實(shí)現(xiàn)放大鏡效果，當(dāng)鼠標(biāo)移動(dòng)到small對(duì)象上方時(shí)，就會(huì)在large對(duì)象中顯示大圖的對(duì)應(yīng)位置，這就涉及到mousemove事件了，所以，我們需要實(shí)現(xiàn)mousemove事件的監(jiān)聽(tīng)方法（如何定義jQuery插件可以參考《自定義jQuery插件Step by Step》）。
現(xiàn)在，讓我們實(shí)現(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
});
}
}
});
});
上面，我實(shí)現(xiàn)了mousemove事件的監(jiān)聽(tīng)方法，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中，我們需要獲取當(dāng)前鼠標(biāo)的相對(duì)坐標(biāo)位置，下面我們通過(guò)圖片講解如何獲取鼠標(biāo)的相對(duì)坐標(biāo)位置。
相對(duì)坐標(biāo)
圖1鼠標(biāo)相對(duì)坐標(biāo)位置
當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中，我們需要獲取鼠標(biāo)在magnify中的相對(duì)坐標(biāo)位置，這里我們把相對(duì)坐標(biāo)定義為(mx,my)，通過(guò)上圖我們知道相對(duì)坐標(biāo)等于(pageX - offsetLeft, pageY - offsetTop)。
現(xiàn)在，我們已經(jīng)獲取鼠標(biāo)在magnify對(duì)象中的坐標(biāo)值，接下來(lái)，需要獲取對(duì)應(yīng)大圖的相應(yīng)坐標(biāo)，這里我們把大圖的對(duì)應(yīng)坐標(biāo)定義為(rx,ry)，我們可以通過(guò)比例關(guān)系獲取(rx,ry)的值。
mx / small.width （原圖的寬）= rx / native_width（大圖的寬）
my / small.height （原圖的長(zhǎng)）= ry / native_height（大圖的長(zhǎng)）
通過(guò)上面的比例關(guān)系，我們知道大圖的坐標(biāo)(rx,ry)等于(mx/small.width*native_width, my/small.height*native_height)。
通過(guò)上述的公式，我們可以獲取大圖對(duì)應(yīng)坐標(biāo)位置，當(dāng)鼠標(biāo)移動(dòng)到magnify對(duì)象中就顯示對(duì)應(yīng)位置的大圖部位，接下來(lái)我們需要實(shí)現(xiàn)大圖的加載實(shí)現(xiàn)了。
background-position屬性
在實(shí)現(xiàn)大圖加載顯示之前，首先介紹CSS中背景定位background-position的知識(shí)。
圖2 CSS background-position
上面，有一個(gè)100x100像素的圖片它由四種顏色組成，而且每種顏色占50 x50像素，接下來(lái)，我們將通過(guò)修改該圖片CSS的background-position屬性值來(lái)顯示該圖片的不同位置。
我們看到在大正方形下有兩行小正方形，它們顯示的顏色位置都不相同，這里我們通過(guò)修改每個(gè)div元素CSS的background-position屬性值實(shí)現(xiàn)的。
例如：第一行的藍(lán)色方形，我們?cè)O(shè)置CSS的background-position屬性為：0px -50px;這相當(dāng)于原圖往上移動(dòng)50px，第一行的其他方形也通過(guò)左右和上下移動(dòng)實(shí)現(xiàn)的。
但第二行的方形就顯得更加奇怪了，因?yàn)樗鼈兌加伤姆N顏色組成，而且顏色的位置都不一樣，這究竟是怎樣實(shí)現(xiàn)的呢？
例如：第二行的第一個(gè)方形，我們?cè)O(shè)置CSS的background-position屬性為：25px 25px;這相當(dāng)于原圖向下和向右移動(dòng)了25px，由于image wrap的作用它會(huì)填充剩余位置的顏色。
現(xiàn)在，我們已經(jīng)了解到了CSS的background-position屬性的作用，所以我們通過(guò)修改large對(duì)象的background-position屬性來(lái)顯示對(duì)應(yīng)的圖像部分，具體實(shí)現(xiàn)如下：
$large.css({
left: px,
top: py,
backgroundPosition: bgp
});
上面，我們通過(guò)加載大圖的方式來(lái)實(shí)現(xiàn)放大鏡效果，接下來(lái)，我們將介紹通過(guò)調(diào)整原圖的長(zhǎng)和寬來(lái)實(shí)現(xiàn)放大鏡效果。
mousewheel事件
前面，我們通過(guò)mousemove事件來(lái)放大圖片，這里我們將通過(guò)鼠標(biāo)的滾輪事件實(shí)現(xiàn)圖片放大效果。
由于，不同的瀏覽器有不同的滾輪事件。主要是有三種：onmousewheel（IE 6/7/8）、mousewheel（IE9，Chrome，Safari和Opera）和DOMMouseScroll（只有Firefox支持），關(guān)于這三個(gè)事件這里不做詳細(xì)的介紹了。
由于不同瀏覽器之間存在著差異，為了實(shí)現(xiàn)瀏覽器之間的兼容，所以，我們需要監(jiān)聽(tīng)以上三種滾輪事件（onmousewheel，mousewheel和DOMMouseScroll），具體實(shí)現(xiàn)如下：
$(".magnify").bind('DOMMouseScroll mousewheel onmousewheel', function(e) {
});
上面，我們實(shí)現(xiàn)了兼容不同瀏覽器的滾輪事件監(jiān)聽(tīng)方法，接下來(lái)，判斷滾輪向上或向下也要考慮不同瀏覽器的兼容性，主流的覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個(gè)值，detail只取±3，wheelDelta只取±120，其中正數(shù)表示為向上，負(fù)數(shù)表示向下。
由于detail和wheelDelta都有兩個(gè)值表示向上或向下滾動(dòng)，所以不同瀏覽器間可以通過(guò)以下方式實(shí)現(xiàn)兼容，具體實(shí)現(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īng)方法，當(dāng)用戶滾動(dòng)滾輪時(shí)需要?jiǎng)討B(tài)地修改原圖的尺寸，這里我們定義縮放比scaling為0.3，也就是說(shuō)每當(dāng)用戶滾動(dòng)一下滾輪原圖就按0.3的比例進(jìn)行縮放，具體實(shí)現(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)實(shí)現(xiàn)了通過(guò)滾輪對(duì)圖片進(jìn)行縮放查看的效果，完整的實(shí)現(xiàn)如下：
/***********************************
* 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 放大鏡效果
上面，我們實(shí)現(xiàn)了放大鏡效果，當(dāng)我們鼠標(biāo)停留在圖片上方會(huì)自動(dòng)放大圖片的相應(yīng)部位，當(dāng)然我們可以通過(guò)滾輪調(diào)整放大的比例。
1.1.3 總結(jié)
在本博文中，我們介紹了如何實(shí)現(xiàn)放大鏡效果，總的來(lái)說(shuō)，我們可以通過(guò)兩種方式實(shí)現(xiàn)放大鏡效果，而且在博文中都給出了詳細(xì)的介紹，通過(guò)mousemove事件實(shí)現(xiàn)加載大圖的效果，mousewheel事件實(shí)現(xiàn)動(dòng)態(tài)修改原圖的尺寸。
這只是一個(gè)簡(jiǎn)單的程序，我們還有很大的改善空間，提供一個(gè)內(nèi)容豐富和功能強(qiáng)大的程序是我們的目標(biāo)。
以上內(nèi)容給大家介紹了jQuery實(shí)現(xiàn)放大鏡效果 ，希望對(duì)大家有所幫助。
相關(guān)文章
jQuery插件formValidator實(shí)現(xiàn)表單驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了jQuery插件formValidator實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2016-05-05
jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫(kù)的方法,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素及基于get實(shí)現(xiàn)ajax交互保存數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下2015-11-11
純JAVASCRIPT圖表動(dòng)畫(huà)插件Highcharts Examples
官方提供免費(fèi)的下載包以及詳細(xì)的文檔說(shuō)明，非常的值得收藏。2011-04-04
下面小編就為大家?guī)?lái)一篇jQuery 常用代碼集錦(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的隨機(jī)多彩tag標(biāo)簽隨機(jī)顏色和字號(hào)大小效果,需要的朋友可以參考下2014-03-03
自己動(dòng)手手寫(xiě)jQuery插件總結(jié)
這篇文章主要介紹了自己動(dòng)手手寫(xiě)jQuery插件總結(jié),本文是個(gè)人學(xué)習(xí)jQuery插件的總結(jié),實(shí)現(xiàn)了一個(gè)小功能的jQuery插件,需要的朋友可以參考下2015-01-01
JQuery設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式
設(shè)置文本框和密碼框得到焦點(diǎn)時(shí)的樣式，通過(guò)jquery來(lái)實(shí)現(xiàn)，需要注意的是中間用逗號(hào)隔開(kāi)，感興趣的朋友可以參考下2013-08-08
BootStrap 標(biāo)題設(shè)置跨行無(wú)效的解決方法
這篇文章主要介紹了BootStrap 標(biāo)題設(shè)置跨行無(wú)效的解決方法,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jquery獲取css的color值返回RGB的方法,涉及jQuery字符串正則運(yùn)算與數(shù)值轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2015-12-12
BootStrap table表格插件自適應(yīng)固定表頭(超好用)
這篇文章主要介紹了BootStrap table表格插件自適應(yīng)固定表頭(超好用)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08