jqzoom插件图片放大功能的一些BUG

建议使用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插件的文件，几乎就没再调什么，完美的图片放大功能就出来了，去不同内核的浏览器去测试了下，都没一点问题！

时间： 2025-01-02 18:13:59

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

图片放大功能

图片放大功能插件及jquery.extend函数理解 前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { this.opts = $.extend({ wrap: '', clickimgs: '', callback: function(){} }, opts); this.images_n = []; //保存一条评论中的所有图片 this.$s

Cocos2dx 3.2 之实现精灵图片放大功能

原文地址 http://blog.csdn.net/jhonlight/article/details/38408351 今天一个群友问我: 我Scene里放置一个Layer,Layer盛放一张图片,即背景图片,我想更换这张图片,而且要求带有系统提供的切换Scene 淡入淡出的效果,于是我用Director类的切换用系统提供的切换动画包装的scene,但是效果是整个scene都被切换了,而我想要的是只有背景变化,其余的不变. 大家都知道,这样做当然不可以,Director(导演)的切换会把制定的

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

前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { this.opts = $.extend({ wrap: '', clickimgs: '', callback: function(){} }, opts); this.images_n = []; //保存一条评论中的所有图片 this.$showArrow = false; //显示左右翻页按

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER

使用Layer完成图片放大功能

序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大.但是放大后的图片模糊.没有遮罩.在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的话接来下的代码就可以不用看了,这个实现的功能是和zoom.js一样的,只是个人强迫为了体验效果更佳而进行改动.注意事项:放大后的图片其实就是图片自身的大小,放大之前是进行缩小的图片. 1.引用layer.js Layer官网:http://layer.layui.com/ 2.html代码: <a

vue-photo-preview 图片放大功能

查看图片详情,放大图片 使用方法: 1.安装 npm install vue-photo-preview --save 2.引入(全局或局部) import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview); 3.使用(template中) //在img标签添加pre

为BlueLake主题增加图片放大效果

fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们就将 fancyBox 集成到 hexo BlueLake 中. 一.下载 fancybox git clone https://github.com/fancyapps/fancybox.git 文件下载下来之后,如下图所示: 将 dist 目录下的两个 js 文件拷贝到 BlueLake 主题的

自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

自写图片遮罩层放大功能jquery插件源码，photobox.js 1.0版，不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q