您当时的方位:主页 > 言语编程 > jQuery

jQuery教程:制造滑动动画作用的层

2014-10-28  

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