放大镜jquery,放大镜原理

为什么jQuery用了放大镜我的放大镜跟鼠标不在一起的，放大镜也不会只出现在小图片上面，如图大神帮帮忙

不是拼接的。基本原理是用一个（big.jpg ）或两个图（small.jpg ,big.jpg）实现。一个图的方式：img控件直接加载大图，用width,height控制缩小显示，mouseover时根据设置比例，放大的范围，在另一个img中显示原图的相应部分（需控制css：overflow:hidden)，两个图的差不多，小图是大图的缩略图片，这样做的好处是不用直接加载大图，提高网页显示速度，只有发生了鼠标滑动放大事件时才动态加载大图。p.s. 多看看“js 放大镜”的源码，就能知道具体怎样实现的了

成都创新互联公司专注于封丘网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供封丘营销型网站建设，封丘网站制作、封丘网页设计、封丘网站官网定制、小程序开发服务，打造封丘网络公司原创品牌,更为您提供封丘网站排名全网营销落地服务。

jquery放大镜原理，详细点

我个人理解一个容器小图一个容器大图

鼠标放在小图上获得在小图上面的鼠标坐标的百分比比如距离顶部/左边50%

定位到大图距离顶部/左边50% 大图的容器大小有限制超出部分隐藏因此就有了小图看大图鼠标增加监听事件

onmove

如何用jquery实现放大镜的插件

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"//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"//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"//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){/*鼠标经过时添加一个事件处理程序*/

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');/*光标呈现十字线*/

$(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轴比例不是数字时*/

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');/*规定元素可见*/

}

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(){/*规定为每个匹配元素规定运行的函数*/

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实现了图片放大镜功能，那后台传图一定要传2张图片才行吗

一般来讲是需要有两张的

因为不一定会是所有人都用的到这个功能的

放小图,是为了保证页面首次加载的速度

你可以想像一下,如果小图的标签直接放大图,而用width和height强制缩小他的尺寸,当然尺寸是缩小了,但是图片的大小是不变的