php动态滚动效果,jQuery_jQuery教程:制作滑动动画效果的层，使用jQuery制作滑动动画效果的 - phpStudy...

使用jQuery制作滑动动画效果的层

基本原理

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

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

第一步 – CSS 基础工作

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

.boxgrid{

width: 325px;

height: 260px;

margin:10px;

float:left;

background:#161613;

border: solid 2px #8399AF;

overflow: hidden;

position: relative;

}

.boxgrid img{

position: absolute;

top: 0;

left: 0;

border: 0;

}

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

.boxcaption{

float: left;

position: absolute;

background: #000;

height: 100px;

width: 100%;

opacity: .8;

/* For IE 5-7 */

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

/* For IE 8 */

-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

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

.captionfull .boxcaption {

top: 260;

left: 0;

}

.caption .boxcaption {

top: 220;

left: 0;

}