大家看到这个图片播放效果的演示后一定觉得很熟悉吧,因为该效果使用的地方是在太多了。但凡比较大型的网站上都有图片播放的效果,有的是单一的图片切换、有的是图片渐入渐出、还有的就是左滑右滑。而我演示的这个版本则是播放效果比较丰富的,所以也是使用比较广泛的。
在以前的公司一个人做网站时我就曾将它作为公司网站首页的图片播放效果,那个时候我的Js不好,纯粹是拿了代码后套进内容,然后放到网上去就万事OK了。现在不一样了,JS编程熟悉了,jQuery库更是熟悉,便觉得原始的代码怎么看都不爽,昨天终于将该效果的JS代码重写了一下,贴出来与大家分享!
本文纯粹是贴出一些比较实用的代码出来供大家学习和使用,也算是个人博客对这些实用代码的记录和收集吧!有用到的可以参考,没用到的直接可以飘过!
特意将这些代码写成jQuery插件的格式,这样方便大家使用的时候调用。我在平时的开发和自我学习过程中也积累了不少有用的代码,不知道怎么概括性地发布出来,所以就已文章的形式陆续贴出来与大家分享。
以单篇文章发布的插件代码都是一些简单的代码,若是一些复杂的代码或插件我会归纳到插件专区里去,这样大家下载起来也方便!
昨天晚上收到的求助邮件,说因上级的要求需要制作一个走马灯效果的公告栏,希望我可以帮助他解决。因看到邮件的时候都快要睡觉了,所以并没有立即处理。
今天早上到了公司,放开手边的工作,花了一点点时间给他制作了一个主流浏览器都兼容的走马灯公告栏。然后mail给他,但他过会儿回邮件说缺少鼠标悬停时停止的效果。于是乎有花了几分钟添加了相应的代码。到了下午快下班的时候,该同学又发来了邮件,说我的公告栏的效果有点欠缺,现在的效果和marquee标签的效果一样,需要等内容上移完成后才会重复滚动,如果可以连续滚动的话那就完美了。
于是就在刚刚的时间我有花了几分钟的时间给他解决了,mail给他。不知道他是否还会有什么新的要求呢,期待啊!毕竟这对我来说也是一个挑战嘛,同时也帮助到了别人,何乐而不为呢!
相信大家有用过Google Doc或Flickr,或者一些SNS社区的图片添加描述信息的效果,他们是在点击了一段文字后出现一个输入框,在输入框内输入你要填写的内容,点击“确认”或者“发表”即可立即显示出来。
今天做的这个效果呢,就是其中的截取版本。为什么这么说呢,因为我的效果只实现了前端的更改后立即发布的效果,而没有实际的与服务器端交互,也没有将输入的内容添加到数据库中,主要是为大家介绍一下实现原理。
注意:源代码中没有jQuery库文件,请下载查看代码的朋友根据源代码路径自行添加。
分享一个我做的图片轮换展示效果,主要实现原理:通过设置非第一个图片的position,通过overflow:hidden属性隐藏,再使用jQuery的animate效果函数作出链性轮换的效果。
轮换的图片是我第一个主题的banner大图的截图版。在提供下载的压缩包里有一个png的图片是Fireworks的源文件,喜欢修改的朋友可以自行修改!另压缩包中的源码没有添加注释,不懂的请阅读本文中的注释。
PS:jQuery库请根据源码的路径自行加入,压缩包中不提供下载。
一直都很喜欢下拉菜单,因为这样可以导航到更多的页面,给访问者一目了然的感觉。
之前在公司的网站上就是用的下拉菜单导航栏的方式进行导航,当时是使用了li:hover的方式通过鼠标移动到li上,显示出li下的ul。而在ie6中则使用javascript修复li:hover。这样做出来是没有动态的效果,下拉菜单一下子就凭空出现了。
运用jQuery库制作下拉菜单的好处就是可以做出各种不同的动态效果,我今天讲解的是运用slideDown()和slideUp()函数实现的卷页效果。
今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果,很是喜欢。便查看的源码后,了解了实现的原理,自己重新编写了CSS和JS代码,现效果如下:
外部链接查看效果:Demo,源代码下载:Download
前段时间在国外的博客上看到这个jQuery的书籍展示效果,觉得很是不错,并下载了源码,自己重新编写了CSS和JS,效果:如下
说明:因为在此页面中是通过使用iframe标签引入外部页面,加上显示页面的宽度有限,所以当鼠标移动到Info图标上时,部分内容被遮盖住,这时你可以通过外部链接查看:Demo
源代码下载
今天不知怎的,一直在做tab的特效,看到MSN官网的tab效果不错,就花了一点点时间小做了一下,具体效果:如下