基本原理
这些具有动态效果的滑动盒都基于同样的基本原理。在你经过想要"窥见"对象中的其他两个项目,这个带有".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,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
分享到:
相关推荐
6种jQuery导航栏滑动动画效果
【Jquery经典特效26】jQuery动画背景滑动切换效果
jQuery动画背景滑动切换效果是一款鼠标悬停在图片上后,左侧的图片向上移动半个图片的距离。
jQuery制作火焰动画菜单效果 jQuery制作火焰动画菜单效果 jQuery制作火焰动画菜单效果 jQuery制作火焰动画菜单效果 jQuery制作火焰动画菜单效果
jQuery图片自动滑动门效果图片切换图片滑动幻灯片 所
效果描述: 非常不错的一个基于jQuery的进度条展示动画效果 使用方法: 1、引入css样式 2、将index.html中的代码部分拷贝过去即可
jQuery实现标题滑动框效果,已经打包好的封装源码!
默认图片平均分配在网页顶部,点击图片后,统一向左滚动后逐渐缩小消失,帅气的图片动画效果,懒人之家推荐下载
有五种用JQuery 做成的图片滑动很炫动画效果
jquery mobile左右滑动效果今天给大家分享了
jquery实例超炫animate动画效果 demo是原版,效果还是相当炫丽 后面自制了两个
jquery 多图片左右滑动效果 兼容多浏览器器
jquery左右伸缩滑动效果
jQuery图片自动滑动门效果,网上看到的,觉得不错上传上来,供大家一起共同分享学习。
jQuery实现按钮滑动切换
利用jquery实现层的显示与隐藏效果。
jquery坐标标尺滑动效果
jquery制作的一个滚动图片的效果 放在首相展示信息
jQuery动画左右滑动。 连续点击结束当前动画并跳到终点继续下个滑动