不是拼接的。基本原理是用一个(big.jpg )或两个图(small.jpg ,big.jpg)实现。一个图的方式:img控件直接加载大图,用width,height控制缩小显示,mouseover时根据设置比例,放大的范围,在另一个img中显示原图的相应部分(需控制css:overflow:hidden),两个图的差不多,小图是大图的缩略图片,这样做的好处是不用直接加载大图,提高网页显示速度,只有发生了鼠标滑动放大事件时才动态加载大图。p.s. 多看看“js 放大镜”的源码,就能知道具体怎样实现的了
我们提供的服务有:网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、镜湖ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的镜湖网站制作公司
一般来讲是需要有两张的
因为不一定会是所有人都用的到这个功能的
放小图,是为了保证页面首次加载的速度
你可以想像一下,如果小图的标签直接放大图,而用width和height强制缩小他的尺寸,当然尺寸是缩小了,但是图片的大小是不变的
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
(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;
}
我个人理解 一个容器小图 一个容器大图
鼠标放在小图上 获得在小图上面的鼠标坐标的百分比 比如距离顶部/左边50%
定位到大图 距离顶部/左边50% 大图的容器大小有限制 超出部分隐藏 因此就有了小图看大图鼠标增加监听事件
onmove
当前文章:jquery放大镜,JS放大镜
URL分享:https://www.cdcxhl.com/article40/dsgpseo.html
成都网站建设公司_创新互联,为您提供外贸网站建设、网站营销、网站排名、网站设计公司、动态网站、网站维护
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联