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% ...
随机推荐
- HTML学习3---排版标记
上节,我们学习了boda常用的属性以及HTML的一些标记,但是图显示的效果却不是那么的好看. 原因就是没有排版好,我们这次使用居中来使这个页面更好看一点,顺便多加入几个别的标记. HTML排版标记 ( ...
- vue url生产二维码
<template> <div id="QRcode"> <div class='QR-qrcode' style='display:none;'&g ...
- 第十课 C++异常简介
异常不是错误,异常是程序中可预料到的另一条执行分支,是可预见的.错误是不可预料的. C++内置了异常处理的语法元素try...catch...,如下: C++通过throw语句抛出异常信息: 上图中t ...
- (转)ZooKeeper-3.3.4集群安装配置
转载于 千与 的 http://blog.csdn.net/shirdrn/article/details/7183503 ZooKeeper是一个分布式开源框架,提供了协调分布式应用的基本服务,它向 ...
- NAT 穿透
/********************************************************************************* * NAT 穿透 * 说明: * ...
- graphql-binding openapi 集成demo
类似的将openapi 转换为graphql api 的也有 https://github.com/yarax/swagger-to-graphql 基本项目 参考代码 https://github. ...
- php浮点数比较
本文实例讲述了PHP中两个float(浮点数)比较方法.分享给大家供大家参考.具体如下: 最近在开发一个合同管理系统的时候,涉及到两个浮点数比较,算是把我郁闷惨了.在N久以前,就不晓得从哪里听来的一个 ...
- 【转】VC++ 也有 Refactoring 功能了
原文网址:http://blog.csdn.net/yapingxin/article/details/18923095 分类: C++2014-02-04 14:00 2688人阅读 评论(0) 收 ...
- Windows Server Core Command (管理服务器核心的具体操作命令)
从 Windows Server 2008 开始,管理员可以选择安装具有特定功能但不包含任何不必要功能的 Windows Server 的最小安装服务器核心(Server Core),它为一些特定服务 ...
- windows7安装django并创建第一个应用
1.安装django 1.1.下载Django包 https://www.djangoproject.com/download/https://www.djangoproject.com/m/rele ...