JQuery zoom插件学习

简介: jquery zoom是一款图片放大插件,经常用在商城商品页面里。使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件下面是要操作的图片节点最后加上初始化的js代码,不出意外就成了$(document).ready(function(){ $(".jqzoom").jqueryzoom();});但事情总不会这么顺利,这个问题害我忙活了半天,搞的我还以为jquery.zoom.js文件有错呢,结果把整个js文件研究了一遍,好在代码不多,用chrome调试运行一遍还是能看的懂得。

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偏了几百个像素。所以我就把代码研究了一遍,最后发现没有问题,而且我也大概知道了问题的原因,下面的图是我根据代码的意思画的图
img_f6a9c0bb4a66bce357d4f0192c3b71ae.png
这个是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去掉,或者覆盖掉,就没有问题了

目录
相关文章
|
6月前
|
JavaScript 前端开发
jQuery学习(十二)—jQuery中对象的查找方法总结
jQuery学习(十二)—jQuery中对象的查找方法总结
|
6月前
|
JavaScript
jQuery学习(九)—常用的包裹方法
jQuery学习(九)—常用的包裹方法
|
6月前
|
JavaScript
jQuery学习(七)— append方法与appendTo方法
jQuery学习(七)— append方法与appendTo方法
|
29天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
6月前
|
JavaScript
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
jQuery学习(八)—before方法、after方法、insertBefore方法、insertAfter方法
|
27天前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
29天前
|
XML JavaScript 前端开发
JavaScript学习 -- jQuery库
JavaScript学习 -- jQuery库
40 0
|
29天前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
23 0
|
29天前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
jQuery选择器-第2次课-大部分跟CSS3选择器类似-几乎没有学习成本-附案例-作业等
20 0
|
29天前
|
JavaScript 前端开发 API
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
jquery是什么-是否还有必要学-与JS的区别-学习技巧-文末附资料、案例、作业
48 0