為什么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)站建設、通渭網(wǎng)站制作、通渭網(wǎng)頁制作以及通渭網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，通渭網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到通渭省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

jquery放大鏡原理，詳細點

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

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

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

onmove

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

一般來講是需要有兩張的

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

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

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

如何用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元素的結尾（仍然在內部）插入指定內容*/

$('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做的放大鏡鼠標無法保持在放大框的中心怎么辦，求大神解答

1、預計是你的設置問題，可以試試線程的JQ插件，如jqzoom之類的，

2、自己計算的公式需要線理解位置關系，然后慢慢調整