此网站为郑州seo技术博客网站,欢迎加好友互相探讨!
当前位置:郑州SEO博客 > HTML技巧 > 正文

购物系统图片放大器jqzoom的一点使用心得

11-22 HTML技巧

很久没写过菜鸟级别的技术文章了,一是最近一段时间遇到了一些烦心事没能继续研究这方面的东西,二是最近公司里的管理层有稍许波动,有点影响了自己;而最为重要的是最近一段时间就跟女人每个月来月事时爱唠叨似的一年之中总有那么几天会莫名其妙的感到烦躁,心浮气躁自然是写不了程序啦!面壁了几天,算是基本渡过了这段莫名其妙的时间,从昨晚开始就在研究jquery插件jqzoom,今天效果出来了,趁现在还有点兴趣,记下使用jqzoom的感悟。

jqzoom是一个jquery插件,自然必须在jquery的js库下运行了。

先介绍一下jqzoom,其由国外某遵循BSD开源协议的开源组织所开发,其详细的代码下载以及文档地址如下: 。jqzoom的功能很简单,就是一个图片放大器。之前淘宝购物的物品详细页面的图片查看器就是类似的zoom js组件。说的多了有些没了解过的朋友们也看不明白,直接上图:

jqzoom功能示意图

说明白了jqzoom是啥后,现在分析一下代码。js代码下有:

jqzoom=function(el,options){
........
};
$.jqzoom={
..........
};

一看就是运行在jquery下的插件,前者是类库的集成函数,后者里可以更改默认的动作以及样式外观。而需要指出的是jqzoom是配合css以及容器标签才能正常运行的,所以开源包里还有一个css文件需要引入到使用jqzoom的页面中。以下说下使用jqzoom的方法:

step1:在页面中引入jqzoom类库以及css库。其中jquery.jqzoom-core.js文件为未压缩的文件,体积较大(30k),而jquery.jqzoom-core-pack.js则为压缩过的jqzoom库,前者可以用来分析代码,后者则可以直接使用在项目中。代码如下:

<link rel="stylesheet" href="../Static/Style/jquery.jqzoom.css" type="text/css">
<script type="text/javascript" src="../Static/Js/jquery.jqzoom-core-pack.js">

step2:在页面中划出jqzoom的容器标签,其官方的demos包中建议使用a标签,我后来查看了jquery.jqzoom-core.js代码,发现其好像也仅仅只支持a标签作为容器标签。代码如下:

<a href="imgsr" class="jqzoom" title="产品样式外观细节查看" rel='gal1'>

其中a标签的href属性值即为需要放大的图片的url,而这个class则是必须的,title则是放大镜框上方的标题,而rel属性则是切换多图放大使用的标记,本文第一张图中所示下方列表四张图片即为此。

step3:初始化jqzoom,无需多说明,直接上代码:

<script type="text/javascript"> $(document).ready(function() { $('.jqzoom').jqzoom({ zoomType: 'reverse', lens:true, xOffset:65, preloadImages:false, alwaysOn:false }); }); </script>

其配置的参数见本博客另外一篇文章查看,或者查看jquery.jqzoom-core.js中的options配置方式。

到此,使用方法说完,接下来在firebug下分析一下jqzoom运行的机理:

上图为firebug下的html代码查看的代码,是不是发现那个容器a标签内部潜入了一个class为zoomPad的div标签呢?其实展开zoomPad的div下方还有zoomPup以及zoomWindow两个并级的div标签,而zoomPup标签则为放大镜的移动框容器,zoomWindow则为放大镜放大框的容器。

一开始,我看到这些代码后就想着自己通过js代码来自己添加点击切换多图放大查看的代码,其更改机理就是强行更改以上jqzoom插入的几个容器代码中的img标签的src属性,具体实现方法就不多说了,只说这样做的严重的弊端,由于jqzoom本身自带了js事件的轮播函数,而且还将js获取标签节点的node的方式打包了循环筛选,所以我的这种方法是行不通的。以上我的想法写出代码后,一旦运行就会出现严重的内存溢出,表现出来的就是移动框移动速度减慢,感觉浏览器卡起来了.....综上所述,我的这种想法效果是能出来,但没有谁会用这个内存溢出严重的js代码,而且效果也是勉强出来的,要不是操作系统的内存管理性能强大,肯定是死机的命运。所以这种想法只能停留在理论上,而不能用在项目中。果断查看英文文档配合看jqzoom源代码包,才发现jqzoom已经提供了多图切换放大的功能,而且无需额外的配置,只需要按他提供的要求将相应的列表标签带上指定的class即可。

版权保护: 本文由 郑州SEO博客 原创,转载请保留链接: http://www.zglblog.cn/html/112.html