现代 CSS

JavaScript

jQuery制作Facebook Timeline

不知道大家有没有经常观注Facebook,不过我是经常观注他,时时了解他的Web页面的设计与变化,因为我很喜欢他的风格。最近看到Facebook的一个比较明显的变化——Facebook Timeline

Facebook Timeline design

jQuery制作Web全屏效果

记得有一次群里在讨论,有没有办法让页面做成全屏效果,就如在Firefox浏览器上按“全屏”选项,让整个页面满屏显示。当时感觉有点不可思议,可是今天在Tutorialzine.com看到一份教程《Enhance Your Website with the FullScreen API》,可以轻松实现全屏效果。

具体详细的介绍,可以查看Full Screen API,我在此处只介绍一下如何使用jQuery实现全屏效果的过程。

jQuery和CSS3制作回到页面顶部和底部

当一个页面的篇幅太长时,用户的检验就有点烦,特别是当用户要到页面的底部或顶部时,只靠scrollBar来操作的确不爽,我有时也烦。当然,W3cplus也有这样的不足之处,好多朋友都有提过,于是在第二版本中我加了一个回到顶部的效果,但不知道怎么加回到底的效果。因为自己的jQuery还处在学习的初级阶段,属于半吊子中的半吊子,时常依赖别人的插件来做效果。比如说,前面介绍的《jQuery制作go to top按钮》中介绍的回到页面顶部的四个demo效果,都是到处整来的,有时只知道其表,不知道其质。真是感到惭愧呀。

jQuery制作Tabs

Tabs的效果在Web页面制作中,可以说是随处可见,我也知道有关于这样的教程在网上上相当的多,前面本站在《纯CSS3制作Tabs选项卡》中介绍了纯CSS制作的Tabs,而《CSS3+jQuery制作切角的Tabs》介绍了使用CSS3+jQuery制作Tabs的方法。今天依然要介绍的是使用jQuery来制作Tabs,但这种方法相对来说是简单易于理解的,就算我这样的初学者都能理解。

jQuery Plugin: Easy Accordion

学习jQuery有一段时间了,进展甚慢。这段时间反复在学习手风琴的制作,从纯CSS的制作到jQuery的制作,在W3cplus和大家共享了多篇有关于制作手风琴效果的Blog。比如:

jQuery制作水平手风琴

上回在《如何使用jQuery制作手风琴效果》一文中介绍了使用jQuery制作垂直手风琴效果,今天我们一起在来看一个水平手风琴效果,如下图所示:

在这个例子中,我创建了一个水平手风琴效果,用来展开每个缩略图的提示内容。下面我们来看其具体是如何通过jQuery来实现。

使用jQuery和CSS控制元素对齐

上节在《自定义表单——jQuery制作个性化Checkbox》介绍了用jQuery美化表单中的checkbox。今天和大家一起探讨另一个表单制作中的对齐问题,这个我想大家在平时制作表单之时,关于对齐一定有碰到过,那么在这个简短的教程中主要尝试另一种解决方法,希望大家会喜欢。

在Web页面中创建一个Web表单时(比如说注册信息表单,或者联系表单),你都必须做出一个功能和视觉对齐的布局。如下图所示:

自定义表单——jQuery制作个性化Checkbox

要让表单中的元素具有个性化风格,仅仅通过样式来实现是相当困难的,大家都很清楚,每种内核的浏览器、每种系统平台下对form元素解析的风格都是不一致的。如果你想让form元素在各种平台或者说各种浏览器具有统一的样式风格,仅仅通过CSS来制作是很难达到统一的标准,但实现他也并不是一件很难的事情,你只要借助jQuery就能轻松的实现。那么今天开始一起来学习使用jQuery制作表单元素的系列,让你不在为此感到头痛。

如何使用jQuery制作手风琴效果

上回在《如何使用jQuery制作展开和折叠切换面板》中介绍了如何使用jQuery的“.slideToggle”或“toggle(function)”来制作展开和折叠面板效果。今天主要在上文的基础上来使用jQuery来制作一个手风琴效果。手风琴的效果就是在我们上文中的展开与折叠效果上的基础上增加了一点特效。就是当你点击一个窗格展开,而同时其他的窗格折叠,具体效果可以点下面DEMO所示效果:

如何使用jQuery制作展开和折叠切换面板

在这节中,我们主要来学习如何使用jQuery.slideToggle()方法来制作显示和折叠的切换面板。当你点击标题时,与其相对应的相邻的主内容将会显示,当你在次点击此标题时,其对应的主内容又将会折叠起来。如下图所示:

实现上面的效果,对于jQuery来说是一件非常容易的事情,下面我们就一起看如何实现上图所展示的效果。

HTML Code

我们先来看看HTML Code

页面

返回顶部