建议使用cloud-zoom插件，jqzoom插件就不要使用了

点击查看——图片放大镜——jQuery插件Cloud Zoom

刚开始使用的是jqzoom插件，但问题太多了，就不说插入到页面中使用了，就单单插件本身带的实例

Bug1:先天性营养不良

你就不能使用margin:0 auto;把它放到一个居中显示的模块。也只能靠窗口最左边显示，要不就是用margin-left让它靠左边一定距离显示，但你要想让它想一般的网站里能适应不同宽度的浏览器，怕是不好用了。

Bug2:后天发育不足

jqzoom受外围模块的影响，刚开始发现的是在IE下显示正常，在webkit内核的极速浏览器下，就没有放大效果了。于是就花了好久时间把整个主体内的模块一层一层的调，才发现是跟jqzoom插件所在的层同一级的一个分享模块影响了它，然后就调整那个分享模块的位置，不幸的是，整个页面不能出现那个分享模块，只要出现，图片的放大效果就受到影响。这就说明这个插件扩展性太差，单独的模块怎么能收外围环境的影响呢！

辛苦的调试历程：

从刚开始发现问题，一连调了两天，可一个问题好不容易解决了，另一个问题又出现了，调到最后，发现了它先天性的BUG——无法再w3c标准下，使用margin:0 auto;让它居中。这就没办法了，真是扶不起来的阿斗啊。。。
所以，有需要图片放大功能的朋友们推荐使用cloud-zoom把，兼容性强，就把原来的js文件和样式换成cloud-zoom插件的文件，几乎就没再调什么，完美的图片放大功能就出来了，去不同内核的浏览器去测试了下，都没一点问题！

jqzoom插件图片放大功能的一些BUG的更多相关文章

  1. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  2. Typora配置双击图片放大功能

    在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...

  3. 图片放大功能如何做？jquery实现

    花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...

  4. 图片放大功能插件及jquery.extend函数理解

    前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...

  5. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. jquery图片放大功能简单实现

    图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...

  7. 使用Layer完成图片放大功能

    序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大.但是放大后的图片模糊.没有遮罩.在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的 ...

  8. 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能

    html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...

  9. html实现点击图片放大功能

    话不多说,直接上代码 <html> <head> <style> .over {position: fixed; left:0; top:0; width:100% ...

随机推荐

  1. CAM350对比两个gerber之间的差异

    今天客供的gerber 版本更新,要检查区别. 参考: https://wenku.baidu.com/view/a154028c19e8b8f67d1cb93f.html 这个更加详细: https ...

  2. 关于C#引用dll动态链接库文件的注释问题

    1.dll动态库文件项目生成属性中要勾选"XML文档文件" 注意:1).要选中项目,查看项目属性,选中解决方案是找不到的.2).XML文件的名字不要修改. 2.添加引用时XML文件 ...

  3. ios系统降级

    1.使用PP助手/iTunes备份好文件资料,以防重要信息丢失: 2.设备连接iTunes,按住Shift键之后点击“恢复iPhone”,选择已下载好的iOS8.4.1固件,等待更新完成即可. 注意要 ...

  4. 经典排序方法 python

    数据的排序是在解决实际问题时经常用到的步骤,也是数据结构的考点之一,下面介绍10种经典的排序方法. 首先,排序方法可以大体分为插入排序.选择排序.交换排序.归并排序和桶排序四大类,其中,插入排序又分为 ...

  5. BZOJ3297: [USACO2011 Open]forgot（背包）

    3297: [USACO2011 Open]forgot Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 189  Solved: 126[Submit ...

  6. Codeforces 983B. XOR-pyramid【区间DP】

    LINK 定义了一种函数f 对于一个数组b 当长度是1的时候是本身 否则是用一个新的数组(长度是原数组-1)来记录相邻数的异或,对这个数组求函数f 大概是这样的: \(f(b[1]⊕b[2],b[2] ...

  7. BZOJ5125: [Lydsy1712月赛]小Q的书架【决策单调性优化DP】【BIT】【莫队】【分治】

    小Q有n本书,每本书有一个独一无二的编号,现在它们正零乱地在地上排成了一排. 小Q希望把这一排书分成恰好k段,使得每段至少有一本书,然后把每段按照现在的顺序依次放到k层书架的每一层上去.将所有书都放到 ...

  8. .NET IL指令速查表

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  9. juqery学习3之juqery对象条件筛选

    代码例子:某个div块下的字体样式的控制. //script代码 <script src="${sitePath}/cec_wcp/js/jquery-1.8.2.min.js&quo ...

  10. Intellij Idea上Spring Boot编译报错：Error:(3, 32) java: 程序包org.springframework.boot不存在

    很尴尬,为了使用Spring Boot的Initializr,特意下了个Intellij Idea,刚按提示新建一个Spring Boot的Maven项目后,就出现红叉叉了.因为IDE是新的,开始是M ...