jQuery教程:制作滑动动画效果的层


使用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;
 }



相关阅读:
PHP+mysql创建ShoutBox
在线数据库管理工具(db007) v1.5
linux制作光盘镜像文件
用MySQL实现SQL Server的sp_executesql
强化 Windows Server 2003 IIS服务器
DotNetNuke Skinning Whitepaper (皮肤管理与皮肤预览部分)
Jquery cookie操作代码
PHP XML DOM
IE与Firefox中CSS兼容性技巧大全
解析模块化CSS
Oracle11G之初体验 数据中心自动化等功能
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
ASP.NET 计划任务实现方法(不使用外接程序,.net内部机制实现)
jquery 模拟雅虎首页的点击对话框效果
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4