JQuery zoom插件学习
2024-08-22 16:32:32
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.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'> </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去掉,或者覆盖掉,就没有问题了
最新文章
- Windows下安装Nginx反向代理服务器
- 【Discuz】关闭QQ互联插件提示信息:系统繁忙,请稍后再试
- centos7下安装vsftpd与PAM虚拟用户
- HTC Vive开发笔记之SteamVR插件集成
- linux下查看串口信息
- OpenJudge 2980 大整数乘法
- [0] DDD领域驱动设计(二) 之 值对象
- 在项目中集成jetty server
- MongoDB 查询分析
- 见过的最全的iOS面试题
- Date——js 获取当前日期到之后一个月30天的日期区间
- 简单的了解一下AQS吧
- jsplumb 中文基础教程
- Redis集群环境使用的是redis4.0.x的版本,在用java客户端jedisCluster启动集群做数据处理时报java.lang.NumberFormatException: For input string: ";7003@17003";问题解决
- Linux中计划任务、周期性任务设置
- jmeter中添加压力机
- 130. Surrounded Regions 卧槽!我半梦半醒之间做出来的。
- 《MVC+EF》——用DBFirst创建ADO.NET实体数据模型和对象关系映射
- 互联网公司linux运维生产场景常用软件工具一览
- Git项目协同开发学习笔记1:项目库开发基础git命令
热门文章
- JavaScript 兼容处理IE67之 !";a";[0]
- lvs,haproxy,keepalived,heartbeat
- 代码编写横屏的UIView
- Border - SGU 133(排序)
- jQuery选择器总结 转
- thread.wait的一个好例子
- 【转】HTML5游戏开发经典视频教程、电子书汇总
- android-----JNI学习 helloworld
- C# WinForm 判断窗体控件是否修改过
- 全栈project师?给把瑞士军刀你去砍鬼子好不好!?