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

使用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;?} 第二步 – 添加滑动动画 下一步是选择适合你的动画，我提供了几个预设的潜在需求（样式）。试用一下他们，选择一个符合你风格也是你需要的样式。 $(document).ready(function(){??????? //要更改上、下方向和左、右方向，只需要在top/left的值中添加-号（表示反方面）。??????? //垂直滑动??????? $(.boxgrid.slidedown).hover(function(){??????????????? $(.cover, this).stop().animate({top:-260px},{queue:false,duration:300});??????? }, function() {??????????????? $(.cover, this).stop().animate({top:0px},{queue:false,duration:300});??????? });??????? //水平没去??????? $(.boxgrid.slideright).hover(function(){??????????????? $(.cover, this).stop().animate({left:325px},{queue:false,duration:300});??????? }, function() {??????????????? $(.cover, this).stop().animate({left:0px},{queue:false