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

最新推荐文章于 2020-08-05 17:01:47 发布

aksoft

最新推荐文章于 2020-08-05 17:01:47 发布

阅读量253

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： jQuery CSS IE Microsoft ViewUI

本文链接：https://blog.youkuaiyun.com/aksoft/article/details/83699663

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种基于CSS和jQuery实现的动态滑动盒子效果。通过设置不同方向的滑动动画，可以揭示或隐藏要展示的内容区域。文章提供了详细的步骤指导，并附带示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本原理

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

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

你可能需要的东西： [url=https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/index.htm]预览[/url] | [url=https://buildinternet.s3.amazonaws.com/live-tutorials/sliding-boxes/slidingboxes.zip]下载个实例的源文件[/url]

第一步 – 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,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});    
        });    
});

第三步 – HTML

这里需要一些类（class）来作为jQuery的选择器，在心里存着这样的标准：

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

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

<div class="boxgrid captionfull">   
        <img src="jareck.jpg"/>   
        <div class="cover boxcaption">   
                <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>

原文：Sliding Boxes and Captions with jQuery