一,导言

  上次 “不定义JQuery插件,不要说会JQuery” 的博客写的肤浅,漏洞百出,而且最重要的是从理论上说如何定义一个jQuery插件,没有实质性的写一个jQuery插件出来,这未免是纸上谈兵。在两周前我就琢磨着写一个什么插件,最后决定写一个jQuery相册插件比较合适,jQuery相册插件虽然在google上一搜,能搜索出成百上千的产品,比如下边列表中谈到的:

   60+ Useful jQuery Image Slider Roundup

  100+ Free jQuery Image Slider Gallery Plugins - Free Download

  60+Javascript图片相册脚本

这些插件我基本上都看过,有些不兼容ie6,有些体积过大,有些要收费,想找出一个能满足自己的,在琳琅满目的插件中不花上一两天功夫的筛选,最后说不定还带上遗憾选择一个不太符合自己的插件。今天我写jQuery插件,绝不是闭门造车,而是为了扫平兼容性强(ie6+,firefox,chrome),插件自身体积小,免费开源的道路。当然最重要的是为了让大家了解如何写出一个jQuery插件。授人以鱼不如授人以渔。

二,准备工作

  知已知彼,百战不败,我阅读了几款jQuery相册插件的代码,以easySlider为例,其中有些思想非常值得借鉴,并且jQuery用的非常娴熟,但是整个插件也有缺陷,比如vertical:true 时,不支持垂直滚动;如果连续点击prev按钮时,图片出现间断滚动;不能同时支持‘上一张,下一张’和数字导航;此款插件属性多,让新手的上手难度大。针对这些缺陷,我感觉有必要再写一款jQuery相册插件与大家分享。

三,目标

  1:此款插件应该兼容绝大多数浏览器(包括ie6,twitter的bootstrap都不支持ie6了,但是淘宝,腾讯,网易都还没有放弃ie6,你想进这些公司,所以还是应该考虑ie6)

  2:不影响使用此插件的网页的其它布局,以及与此页面其它jQuery版本以及js的兼容(在目前市面上的好多插件都做不到这一点)。

  3:此插件体积小,压缩后的js只有5.6kb。

  4:支持图片垂直滚动,横向滚动。

  5:支持图片‘上一张,下一张’导航,数字导航。

  6:支持图片循环连续滚动。

  7:可以通过属性设置每张图片切换的间隔时间。

  8:可以设置图片的滚动速度。

  9:一个页面可以放置多个jQuery相册插件,并且互不影响。

  10:每个相册插件可以灵活的设置大小,边框等。

当然这些都不是最重要的,最重要的是我的信念,我的目标是支持开源,不断更新,精益求精,打出国际市场。园子里有朋友愿意给我提供一个服务器空间的,我马上做一个英文网站,把这个插件给挂起来。这个开源插件的名称叫miniSlider。

四:动手实践

  虽然这个插件只有12行css代码,200多行js代码,但是每行都经过我仔细的推敲。下边以几个典型案例来说明:

  1,支持图片循环连续滚动:这是我开发插件遇上的第一个问题。假如一个相册有4张图片需要循环连续播放,我最开始的做法是,找出需要当前显示的那个图片,把图片移动到第一位,这样就造成了图片之间的顺序混乱,后来我用下边这种方法来解决图片循环连续滚动的问题:

把最后一个图片添加到第一个图片之前,第一个图片添加到最后一个图片之后。这样不管是向前滚动,还是向后滚动,都能支持循环连续滚动。

垂直的情况也如此:

大家一看图,应该明白支持图片循环连续滚动的端倪了。显而易见,图片的垂直滚动或者说是横向滚动,都没有那么神秘。

2:ie6下的css问题:

a:IE6下浮动后的元素使用负margin被隐藏问题,可以用 _position:relative;属性解决,这儿用了css hack原理。_只支持ie6, *支持ie6,ie7。这些css的hack 我相信一个web开发者都是无比的熟悉。

b:DIV中LI超出宽度不换行解决方法  div(white-space:nowrap;) li(*display:inline;  *float:none; *zoom:1;)  一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似 。

c:ie6下的png图片不透明。做图片相册,“上一张,下一张”按钮,圆点导航按钮都是必不可少的,这些按钮都在悬浮在相册图片之上,为了使其按钮图片不要遮挡相册图片,所以这些按钮图片的背景必须要透明,在其它浏览器上都能很好的实现按钮图片背景透明,但是在ie6浏览器显示的时候就是一件很不愉快的事,必须要借助于其它方法解决ie6下png图片不透明的问题。IE6 PNG透明终极解决方案(打造W3Cfuns-IE6PNG最强帖) 这篇帖子说出了目前能够解决ie6下背景图片不透明的问题,如果仅仅是一个很初级的应用,随便用那种方案都是没问题的,当你有一点点个性化的需求,那就应该仔细考虑要用那种方案了。我在这儿选用的是:DD_belatedPNG_0.0.8a-min.js 这种方案。这种方案我感觉是比较完美的,但是完美中也有缺陷,听我详细道来,我有一个图片圆点的导航功能,就是把当前图片对应在的圆点按钮变为高亮。css代码与js代码对应如下:

.mini-slider .n-ul li a{ margin:0px; padding:0px; display:block;  float:left;  height:20px; width:20px;  background-image:url(images/mini-circlebutton.png);}
.mini-slider .n-ul li .current-a{background-position: 0px 18px;}
//方法1:
$(liObj).find("a").addClass("current-a");
//方法2:
$(liObj).find("a").css({ "background-position": "0px 18px" });

方法一和方法2,在firefox,chrome,ie7+的浏览器都能产生同样的效果,但是在ie6上就折腾了我大半天。当你在这个导航按钮上运用了 DD_belatedPNG.fix("div,a, background") 这行代码后(在ie6上支持png图片透明),在ie6上方法一不可行,方法二可行,我还没有分析具体原因,接下来我会作进一步的原因分析。

五:成果

  做了那么多的准备工作,对于一个热爱写程序的人,这个时候的心情其实是激动的。请看下图,这个效果是不是很好看。

有时候图片虽然能足够的说明真相,但是对于程序来说好像还差一步,可运行的代码才能说明真相。先推荐再下载

Jquery相册插件(开源下载)的更多相关文章

  1. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  2. 8个超炫酷的jQuery相册插件欣赏

    在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...

  3. 基于jQuery/CSS3实现拼图效果的相册插件

    今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错.当然图 ...

  4. 轻量的、可自定义 CSS 的 Lightbox 相册插件

    jQuery LightGallery是一个轻量级的,可定制的,模块化的,响应式的 jQuery 相册插件.它采用 CSS 来实现图像和视频的大小调整.因此,这将是非常灵活的,并且比使用 JavaSc ...

  5. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  6. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  7. 前端开发:一个开源、简单易用的jQuery表格插件(DataTables)

    DataTables是一个基于jQuery库的开源(MIT协议)表格插件,支持添加.排序.分页.搜索.过滤等功能,使用简单.广受欢迎,能够与主流前端UI整合(如bootstrap.jQuery UI等 ...

  8. 基于jQuery全屏相册插件zoomVisualizer

    基于jQuery全屏相册插件zoomVisualizer.这是一款基于jquery ui实现的相册插件,支持隐藏显示相册缩略图,支持左右箭头切换图片,支持放大缩及缩小图片.效果图如下: 在线预览    ...

  9. 10个漂亮的jQuery日历插件下载【转载】

    10个漂亮的jQuery日历插件下载 2013-08-07 标签:jQuery日历插件jQuery日历jQuery插件   日期是非常重要的,随时随地.微薄或网站的日期选取器日历必须在那里.您可以使用 ...

随机推荐

  1. 炫酷CSS

    <!DOCTYPE html><!--To change this license header, choose License Headers in Project Propert ...

  2. Session失效之 IE iframe cookie问题(p3p)

    项目中,在做门户系统时,使用了iframe嵌套展示各个子系统的页面,其中有个页面在ie8下,始终无法正常登陆. 后来项目经理分析,应该是iframe跨域导致,赶忙查看了连接地址,还真是一个跨域的页面. ...

  3. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  4. js二维数组与字符串

    1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...

  5. NOIP2010 题解

    机器翻译 题解:模拟 #include <cstdio> #include <cstring> ; ], ]; int main(){ memset(, sizeof(in)) ...

  6. Android之ListView——ArrayAdapter的用法学习

    当我们使用ListView时,必不可少的便会使用到adapter,adapter的用处就像是一个水管接口,把你想展现的数据与你希望展现的布局样式通过某种协定结合起来. ArrayAdapter针对每个 ...

  7. project 2016 11 20 树的多项式

    #include <iostream>#include <stack>#include <cmath>#include <sstream> using ...

  8. 利用xtraBackup实现不停master服务做主从同步

    MySQL主从同步原理: MySQL主从同步是在MySQL主从复制(Master-Slave Replication)基础上实现的,通过设置在Master MySQL上的binlog(使其处于打开状态 ...

  9. g++编译选项

    -g,生成供调试用的可执行文件,可以在gdb中运行.由于文件中包含了调试信息因此运行效率很低,且文件也大不少. -c:生成名为source_file.o的目标文件. -o, 指定输出文件名,可以配合以 ...

  10. 测试文档锁:doc.LockDocument()

    /// <summary> /// 总结:用到DocumentManager.Open(filePath)时,如果是ForWrite,就需要用到lock文档锁. /// </summ ...