Hiro's Blog

大家看到这个图片播放效果的演示后一定觉得很熟悉吧，因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果，有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的，所以也是使用比较广泛的。

在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果，那个时候我的Js不好，纯粹是拿了代码后套进内容，然后放到网上去就万事OK了。现在不一样了，JS编程熟悉了，jQuery库更是熟悉，便觉得原始的代码怎么看都不爽，昨天终于将该效果的JS代码重写了一下，贴出来与大家分享！

本文纯粹是贴出一些比较实用的代码出来供大家学习和使用，也算是个人博客对这些实用代码的记录和收集吧！有用到的可以参考，没用到的直接可以飘过！

特意将这些代码写成jQuery插件的格式，这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码，不知道怎么概括性地发布出来，所以就已文章的形式陆续贴出来与大家分享。

以单篇文章发布的插件代码都是一些简单的代码，若是一些复杂的代码或插件我会归纳到插件专区里去，这样大家下载起来也方便！

继续发布jQuery1.4版本剩余的新特性：第9点至第15点。

九、去除标签元素的父标签；

十、不用删除数据，即可删除掉DOM中的标签元素；

十一、对.index()方法进行了扩展；

十二、DOM控制方法支持回调函数…

题外话：前两天回了一趟泰州，星期二上班后看到了两条比较重大的新闻：1.谷歌耍了我们这些谷歌迷们一把，决定不离开中国了；2.jQuery1.4新版本也正式上线了。

从Nettuts+博客上看到了这票jQuery1.4新特性的总结性文章，该博总结了15条新的特性，便给出相应的实现代码。觉得不错，便整理后翻译过来供大家参考，并加入了1.32版本的实现方法进行比较性地学习。

文章较长，分两篇文章发布，请关心者耐心阅读与等待！上篇包含特性1-8点，下篇9-15点隔一日再发布！

jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。于是乎，在日常的开发中大量使用连缀写法，而事件方法连缀就是一个特例。若给一个Dom对象使用了绑定了多个事件，便于阅读和书写，习惯了使用连缀写法，但这样的书写方式会造成时间的冗余。

1.事件冗余：多个事件方法中多次调用相同的代码

2.事件委派：一次性绑定多个事件，根据事件类别委派相应的操作

众所周知，jQuery是采用$符号作为库的别名，但若是和其他类型的库一直使用是，其他库也有用$符号作为别名的，这样就会引起函数的冲突。所以更多的时间是建议大家使用jQuery来做为别名，或者自定义别名。该片文章重点地讲述了如何在页面代码和插件代码中自定义别名，以便于其他库的兼容，为之后的插件开发之旅铺垫道路！

1.在页面使用代码中如何自定义别名；

2.在插件代码中如何自定义别名。

昨天晚上收到随风同学的求助邮件，说因上级的要求需要制作一个走马灯效果的公告栏，希望我可以帮助他解决。因看到邮件的时候都快要睡觉了，所以并没有立即处理。

今天早上到了公司，放开手边的工作，花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他，但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候，该同学又发来了邮件，说我的公告栏的效果有点欠缺，现在的效果和marquee标签(该标签不符合W3C标准)的效果一样，需要等内容上移完成后才会重复滚动，如果可以连续滚动的话那就完美了。

于是就在刚刚的时间我有花了几分钟的时间给他解决了，mail给他。不知道他是否还会有什么新的要求呢，期待啊！毕竟这对我来说也是一个挑战嘛，同时也帮助到了别人，何乐而不为呢！

周末无事，便写了一个简约的scrollTop插件。在前面的文章（jQuery:Scrolltop滑动插件推荐（修正注释版））中，我曾介绍过一款我在网络收集的相关插件。但发现该作者的代码确实很繁琐，不是很优雅。而我的该scrollTop插件代码就那么十多行，代码非常简单，也非常实用，适合大众使用！

这也是算是我的jQuery插件开发之旅的开端吧，以后一有机会我就会陆续开发一些自己的插件，也尽量写一些简约的插件与大家分享。也希望有这方面的朋友可以多多交流。话不多说，上插件！

该插件的好处是无需在html源文件的头部添加任何标签，只需调用方法即可实现效果！

相信大家有用过Google Doc或Flickr，或者一些SNS社区的图片添加描述信息的效果，他们是在点击了一段文字后出现一个输入框，在输入框内输入你要填写的内容，点击“确认”或者“发表”即可立即显示出来。

今天做的这个效果呢，就是其中的截取版本。为什么这么说呢，因为我的效果只实现了前端的更改后立即发布的效果，而没有实际的与服务器端交互，也没有将输入的内容添加到数据库中，主要是为大家介绍一下实现原理。

注意：源代码中没有jQuery库文件，请下载查看代码的朋友根据源代码路径自行添加。

分享一个我做的图片轮换展示效果，主要实现原理：通过设置非第一个图片的position，通过overflow:hidden属性隐藏，再使用jQuery的animate效果函数作出链性轮换的效果。

轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件，喜欢修改的朋友可以自行修改！另压缩包中的源码没有添加注释，不懂的请阅读本文中的注释。

PS：jQuery库请根据源码的路径自行加入，压缩包中不提供下载。