JQuery zoom插件学习

时间：2023-03-09 13:30:31
JQuery zoom插件学习

jquery zoom是一款图片放大插件，经常用在商城商品页面里。

使用JQuery zoom插件，除了需要引入JQuery.js外，还要引入JQuery.zoom.js文件及jqzoom.css文件

<link rel="stylesheet" href="css/jqzoom.css" type="text/css" media="screen">

<script type="text/javascript" language="javascript" src="js/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="js/jquery.jqzoom.min.js"></script>

下面是要操作的图片节点

<div class="jqzoom"><img src="images/shoe4_small.jpg"  alt="shoe"  jqimg="images/shoe4_big.jpg"></div>

最后加上初始化的js代码，不出意外就成了

$(document).ready(function(){

	$(".jqzoom").jqueryzoom();

});

但事情总不会这么顺利，这个问题害我忙活了半天，搞的我还以为jquery.zoom.js文件有错呢，结果把整个js文件研究了一遍，好在代码不多，用chrome调试运行一遍还是能看的懂得。

问题是这样的，当放大镜放大图片时，应该在原来的图像旁边创建一个div显示，可到我这里，这个div却偏离了原图几百个像素，图片在左上角，放大后却跑到了右下角，也就是这个div的left和top偏了几百个像素。所以我就把代码研究了一遍，最后发现没有问题，而且我也大概知道了问题的原因，下面的图是我根据代码的意思画的图

JQuery zoom插件学习

这个是jquery.zoom.js里面用来为这个div定位的代码



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

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

console.log("imageLeft:"+imageLeft+",imageTop:"+imageTop);

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

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

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

var bigimage = $(this).children("img").attr("jqimg");

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

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

	$(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");

	$(this).append("<div class='jqZoomPup'>&nbsp;</div>");

}

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

	if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width) {

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

	} else {

		leftpos = imageLeft + imageWidth + settings.offset; //452 =

	}

} else {

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

	if (leftpos < 0) {

		leftpos = imageLeft + imageWidth + settings.offset;

	}

}

$("div.zoomdiv").css({

	top: imageTop,

	left: leftpos

});

我想对前端比较熟悉的应该知道问题出在哪里了，没错，*这个div定位应该相对浏览器才行，而我这里却是相对于父节点*。那接下来就简单多了，原来，在我这个div的祖先节点存在多个position:relative，要知道对于position：absolute；的节点，父元素如果出现relative，则是相对于父元素进行定位，否则才是相对于浏览器原点。所以为只要将这些relative去掉，或者覆盖掉，就没有问题了

相关文章