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插件的文件,几乎就没再调什么,完美的图片放大功能就出来了,去不同内核的浏览器去测试了下,都没一点问题!
jqzoom插件图片放大功能的一些BUG的更多相关文章
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- 图片放大功能如何做?jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片: 自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教, ...
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
- 使用Layer完成图片放大功能
序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大.但是放大后的图片模糊.没有遮罩.在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的 ...
- 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...
- html实现点击图片放大功能
话不多说,直接上代码 <html> <head> <style> .over {position: fixed; left:0; top:0; width:100% ...
随机推荐
- Android系统服务(一)解析ActivityManagerService(AMS)
相关文章 Android系统启动流程系列 Android应用进程系列 Android深入四大组件系列 前言 此前在Android系统启动流程.应用进程以及深入四大组件这三个系列文章中,都提及到了AMS ...
- 判断一颗二叉树是否为二叉平衡树 python 代码
输入一颗二叉树,判断这棵树是否为二叉平衡树.首先来看一下二叉平衡树的概念:它是一 棵空树或它的左右两个子树的高度差的绝对值不超过1,并且左右两个子树都是一棵平衡二叉树.因此判断一颗二叉平衡树的关键在于 ...
- I.MX6 CAAM
/********************************************************************************* * I.MX6 CAAM * 说明 ...
- BZOJ2124: 等差子序列(树状数组&hash -> bitset 求是否存在长度为3的等差数列)
2124: 等差子序列 Time Limit: 3 Sec Memory Limit: 259 MBSubmit: 2354 Solved: 826[Submit][Status][Discuss ...
- 使用 Windows 10 中的加速度计(Accelerometer,重力传感器)
在做 UWP 应用开发的时候还有什么理由可以用到加速度计呢?场景很多啦,比如做游戏,做类似 Surface Hub 那种一边旋转,一边所有内容跟着一起转的效果. Windows 10 UWP 中的加速 ...
- Ext.js高级组件
第二章:Ext.js高级组件 grid组件 普通方式 表格面板类Ext.grid.Panel xtype(别名):gridpanel.grid title标题.renderTo渲染至.width宽.h ...
- Mac: iTerm2使用
From: http://www.cnblogs.com/noTice520/p/3190529.html 之前一直有朋友要我分享下在用的mac软件,今天有空就来写一下,可能不止于软件,会有一些配置或 ...
- Android中关于JNI 的学习(一)对于JNIEnv的一些认识
一个简单的样例让我们初步地了解JNI的作用.可是关于JNI中的一些概念还是需要了解清楚,才干够更好的去利用它来实现我们想要做的事情. 那么C++和Java之间的是怎样通过JNI来进行互相调用的呢? 我 ...
- 每日一条 Git 命令:git merge remote master
每日一条 Git 命令:git merge remote master 当远程的分支更新后,需要将自己的代码与远程的分支合并就用以下这个命令合并. git merge remote master 如果 ...
- swing版网络爬虫-丑牛迷你采集器2.0
swing版网络爬虫-丑牛迷你采集器2.0 http://www.javacoo.com/code/704.jhtml 整合JEECMS http://bbs.jeecms.com/fabu/3186 ...