jQuery制作具有滑动动画效果的层

基本原理

这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要"窥见"对象中的其他两个项目,这个带有".boxgrid"的DIV标签充当着一个窗口。还不明白? 让这个图片来给你线索吧:



理解了这个基本原理之后,我们就可以利用滑动元素的动画效果来揭开或遮盖住要展示的区域,以此来创造滑动效果。

你可能需要的东西: 预览 | 下载这个实例的源文件

第一步 – CSS 基础工作

在上面给出基本结构的启示图中,我们需要使用一点CSS来让它显示出预期的效果。下面这个CSS定义了查看窗口(.boxgrid) 并的在LEFT和TOP设定图片的默认POSITION,这对于滑动时的重叠交代很重要。并且不要忘记overflow:hidden将使这一切成为可 能。

如果你不准备用CSS来实现半透明的描述,可直接跳向第二步:

现在,我们需要设定说明层(caption box,觉得用层好过于盒)的默认的起点。如果想让其初始化的时候完全隐藏,这将需要设定TOP和LEFT为你的窗口(.boxgrid)的高和宽,(当 然)这是由所要滑动的方向决定的。你也可以让它在初始化的时候只显示一部分,像这个(CSS所定义的).caption和.boxcaption所给出 的:

第二步 – 添加滑动动画

下一步是选择适合你的动画,我提供了几个预设的潜在需求(样式)。试用一下他们,选择一个符合你风格也是你需要的样式。

第三步 – HTML

这里需要一些类(class)来作为jQuery的选择器,在心里存着这样的标准:

  • DIV标签的类".cover"必须分配给任何一个想要滑动的对象;
  • 有.boxgrid类的DIV标签,图片通常最先显示。

这是一个我将用在.captionfull动画的HTML例子:

好吧。文章标题就这样被我改了。不过,这样对于中文更好理解。而文章这最后一段就不用全译了。只要你知道,这些实例只是供你选择,要创造出一个适合自己的,就要自己动手。如果你有什么不懂的,欢迎到在此留言。

原文:Sliding Boxes and Captions with jQuery