JavaScript   /   131

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

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

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

在上面给出基本结构的启示图中,我们需要使用一点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  5-7 */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
        /* For  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,duration:300});
        });
        //比例缩放滑动
        $('.boxgrid.thecombo').hover(function(){
                $(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
        }, function() {
                $(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
        });
        //部分滑动 (只显示一部分背景)
        $('.boxgrid.peek').hover(function(){
                $(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
        }, function() {
                $(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
        });
        //完全滑动的说明 (从完全隐藏到完全显示)
        $('.boxgrid.captionfull').hover(function(){
                $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
        }, function() {
                $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
        });
        //部分滑动的说明 (部分显示-部分隐藏)
        $('.boxgrid.caption').hover(function(){
                $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
        }, function() {
                $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
        });
});

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

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

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

<div>
     <img src="jareck.jpg"/>
       <div>
             <h3>Jarek Kubicki</h3>
             <p>Artist<br/><a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
       </div>
</div>

好吧。文章标题就这样被我改了。不过,这样对于中文更好理解。而文章这最后一段就不用全译了。只要你知道,这些实例只是供你选择,要创造出一个适合自己的,就要自己动手。如果你有什么不懂的,欢迎到Tech Meme论坛来讨论。这里面没有很多人,因为需要邀请。但,大家喜欢讨论技术问题。如果你需要进来讨论,请联系我。不讨论的就不用邀请码了,因为你可以看到里面的所有文章,除了下载资料。

原文:Sliding Boxes and Captions with jQuery
转载自:幸福收藏夹|利用jQuery 制作具有滑动动画效果的层

网络发现者(aiwei.us)是梁道科技旗下以企业建站,微信开发,视觉设计为主要服务项目的互联网品牌。

我们为企业提供各类互联网平台项目的咨询顾问服务。依靠丰富的互联网实践经验,我们为企业从项目可行性分析,执行策略及方案等方方面面提供合理化建议。