為什么jQuery用了放大鏡我的放大鏡跟鼠標不在一起的，放大鏡也不會只出現(xiàn)在小圖片上面，如圖大神幫幫忙

不是拼接的?；驹硎怯靡粋€（big.jpg ）或兩個圖（small.jpg ,big.jpg）實現(xiàn)。一個圖的方式：img控件直接加載大圖，用width,height控制縮小顯示，mouseover時根據(jù)設置比例，放大的范圍，在另一個img中顯示原圖的相應部分（需控制css：overflow:hidden)，兩個圖的差不多，小圖是大圖的縮略圖片，這樣做的好處是不用直接加載大圖，提高網(wǎng)頁顯示速度，只有發(fā)生了鼠標滑動放大事件時才動態(tài)加載大圖。p.s. 多看看“js 放大鏡”的源碼，就能知道具體怎樣實現(xiàn)的了

成都創(chuàng)新互聯(lián)公司專注于封丘網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供封丘營銷型網(wǎng)站建設，封丘網(wǎng)站制作、封丘網(wǎng)頁設計、封丘網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務，打造封丘網(wǎng)絡公司原創(chuàng)品牌,更為您提供封丘網(wǎng)站排名全網(wǎng)營銷落地服務。

jquery放大鏡原理，詳細點

我個人理解 一個容器小圖 一個容器大圖

鼠標放在小圖上 獲得在小圖上面的鼠標坐標的百分比 比如距離頂部/左邊50%

定位到大圖 距離頂部/左邊50% 大圖的容器大小有限制 超出部分隱藏 因此就有了小圖看大圖鼠標增加監(jiān)聽事件

onmove

如何用jquery實現(xiàn)放大鏡的插件

1、加載CSS：

link href="/styles/cloud-zoom.css" type="text/css" rel="stylesheet" /

2、加載Javascript：

script type="text/JavaScript" src="/js/jquery.1.4.2.min.js"/script

script type="text/JavaScript" src="/js/cloud-zoom.1.0.1.min.js"/script

3、HTML代碼：

a href='/images/zoomengine/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'

rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage.jpg' "

img src="/images/zoomengine/tinyimage.jpg" alt = "Thumbnail 1"http://a

a href='/images/zoomengine/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'

rel="useZoom: 'zoom1', smallImage: ' /images/zoomengine/smallimage-1.jpg'"

img src="/images/zoomengine/tinyimage-1.jpg" alt = "Thumbnail 2"http://a

a href='/images/zoomengine/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'

rel="useZoom: 'zoom1', smallImage: '/images/zoomengine/smallimage-2.jpg' "

img src="/images/zoomengine/tinyimage-2.jpg" alt = "Thumbnail 3"http://a

jquery圖片放大鏡代碼解析注釋

(function($){//定義作用域

$.fn.imagezoom=function(options){/*自定義插件imageszoom，options代表形參（屬性自定義）*/

var settings={

xzoom: 350, /*放大圖的寬度(默認是 350)*/

yzoom: 350, /*放大圖的高度(默認是 350)*/

offset: 10, /*離原圖的距離(默認是 10)*/

position: "right", /*放大圖的定位(默認是 "right")*/

preload:1

};

if(options){

$.extend(settings,options);

}

var noalt='';

var self=this;

$(this).bind("mouseenter",function(ev){/*鼠標經(jīng)過時添加一個事件處理程序*/

var imageLeft=$(this).offset().left;

var imageTop=$(this).offset().top;

var imageWidth=$(this).get(0).offsetWidth;

var imageHeight=$(this).get(0).offsetHeight;

var boxLeft=$(this).parent().offset().left;

var boxTop=$(this).parent().offset().top;

var boxWidth=$(this).parent().width();

var boxHeight=$(this).parent().height();

noalt=$(this).attr("alt");

var bigimage=$(this).attr("rel");

$(this).attr("alt",'');

if($("div.zoomDiv").get().length==0){

$(document.body).append("div class='zoomDiv'img class='bigimg' src='"+bigimage+"'//div"+

"div class='zoomMask' /div");

}

if(settings.position=="right"){

if(boxLeft+boxWidth+settings.offset+settings.xzoomscreen.width){

leftpos=boxLeft-settings.offset-settings.xzoom;

}else{

leftpos=boxLeft+boxWidth+settings.offset;

}

}else{

leftpos=imageLeft-settings.xzoom-settings.offset;

if(leftpos0){

leftpos=imageLeft+imageWidth+settings.offset;

}

}

$("div.zoomDiv").css({top:boxTop,left:leftpos});

$("div.zoomDiv").width(settings.xzoom);

$("div.zoomDiv").height(settings.yzoom);

$("div.zoomDiv").show();

$(this).css('cursor','crosshair');/*光標呈現(xiàn)十字線*/

$(document.body).mousemove(function(e){/*當移動鼠標時*/

mouse=new MouseEvent(e);

if(mouse.ximageLeft||mouse.ximageLeft+imageWidth||mouse.yimageTop||mouse.yimageTop+imageHeight){

mouseOutImage();/*判斷鼠標是否超出圖片范圍*/

return;

}

var bigwidth=$(".bigimg").get(0).offsetWidth;/*最大寬度*/

var bigheight=$(".bigimg").get(0).offsetHeight;/*最大高度*/

var scaley='x';/*x軸比例 */

var scalex='y';/*y軸比例 */

/*隨鼠標移動顯示大圖*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y軸比例不是數(shù)字時*/

var scalex=(bigwidth/imageWidth);

var scaley=(bigheight/imageHeight);

$("div.zoomMask").width((settings.xzoom)/scalex);

$("div.zoomMask").height((settings.yzoom)/scaley);

$("div.zoomMask").css('visibility','visible');/*規(guī)定元素可見*/

}

xpos=mouse.x-$("div.zoomMask").width()/2;

ypos=mouse.y-$("div.zoomMask").height()/2;

xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;

yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;

xpos=(mouse.x-$("div.zoomMask").width()/2imageLeft)

? imageLeft:(mouse.x+$(".zoomMask").width()/2imageWidth+imageLeft)

? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos;

ypos=(mouse.y-$("div.zoomMask").height()/2imageTop)

? imageTop:(mouse.y+$("div.zoomMask").height()/2imageHeight+imageTop)

? (imageHeight+imageTop-$("div.zoomMask").height()):ypos;

$("div.zoomMask").css({top:ypos,left:xpos});

$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;

$("div.zoomDiv").get(0).scrollTop=yposs*scaley;

});

});

function mouseOutImage(){/*定義鼠標離開圖片方法*/

$(self).attr("alt",noalt);

$(document.body).unbind("mousemove");/*移除在頁面中鼠標指針事件*/

$("div.zoomMask").remove();/*移除所有的div.zoomMask*/

$("div.zoomDiv").remove();/*移除所有的div.zoomDiv*/

}

count=0;

if(settings.preload){

/*在boby元素的結尾（仍然在內(nèi)部）插入指定內(nèi)容*/

$('body').append("div style='display:none;' class='jqPreload"+count+"'/div");

$(this).each(function(){/*規(guī)定為每個匹配元素規(guī)定運行的函數(shù)*/

var imagetopreload=$(this).attr("rel");/*圖片預加載*/

var content=jQuery('.jqPreload'+count+'').html();

jQuery('.jqPreload'+count+'').html(content+'img src=\"'+imagetopreload+'\"');

});

}

}

})(jQuery);

function MouseEvent(e){/*記錄鼠標x，y坐標*/

this.x=e.pageX;/*鼠標指針位置*/

this.y=e.pageY;

}

用jquery實現(xiàn)了圖片放大鏡功能，那后臺傳圖一定要傳2張圖片才行嗎

一般來講是需要有兩張的

因為不一定會是所有人都用的到這個功能的

放小圖,是為了保證頁面首次加載的速度

你可以想像一下,如果小圖的標簽直接放大圖,而用width和height強制縮小他的尺寸,當然尺寸是縮小了,但是圖片的大小是不變的