一,导言

  上次 “不定义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. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  2. Trie树(c++实现)

    转:http://www.cnblogs.com/kaituorensheng/p/3602155.html http://blog.csdn.net/insistgogo/article/detai ...

  3. iOS中“返回”操作相关

    在程序中,总会设置“返回”按钮,但不可能在每一个控制器中都去设置一次“返回”按钮,那如何设置全局的“返回”按钮呢? 首先自定义一个导航控制器,在tabBarController中添加子控制器时,使用这 ...

  4. Java EE 和 Java Web

    什么是 Java Web 应用程序? Java Web 应用程序会生成包含各种类型的标记语言(HTML 和 XML 等)和动态内容的交互式 Web 页.它通常由 Web 组件组成(如 JavaServ ...

  5. Android 时间维护服务 TimeService(针对于特殊定制设备)

    此方法针对于无法自动获取网络时间的特殊设备,正常 Android 设备直接调用 System.currentTimeMillis(); 方法获取当前时间即可. TimeService 集成于 Serv ...

  6. 使用Wireshark 查看查找未被过滤端口

    打开Wireshark ,过滤输入“ip.src == [IP] && ip.ttl < 255”,因为防火墙伪造的数据包的TTL都是255,真实的数据包应该是56,所以这句话直 ...

  7. iOS项目旋转控制

    iOS6的旋屏控制技巧 在iOS5.1 和 之前的版本中, 我们通常利用 shouldAutorotateToInterfaceOrientation: 来单独控制某个UIViewController ...

  8. 写字节流转换String 代码示例

    public void pushEmployee(EmpPushToTianFangRequest request){ try { StringWriter sw = new StringWriter ...

  9. Android中的IntentService

    首先说下,其他概念:Android中的本地服务与远程服务是什么? 本地服务:LocalService 应用程序内部------startService远程服务:RemoteService androi ...

  10. iOS 标题内容待定

    UITableView: UITableViewCell的声明文件.所包含的: UIView控件(contentView,作为其它元素的父控件) -- 容器 两个UILabel控件( textLabe ...