Sliding Boxes and Captions with jQuery(水晶质感的滑动块)

一个带有水晶质感的滑动块,能够实现不同方向的滑动特效,上滑动,下滑动,半滑动,对角线滑动,完全滑动。是用jQuery写的,代码很短。

演示:

http://buildinternet.com/live/boxes/

代码分析:

本滑动块是主要用的是jQuery 的 animate(params, options) 函数

这个函数的关键在于指定动画形式及结果样式属性对象


Css Code :

*{
padding:0px; margin:0px;
}
body{
background:#D5DEE7;
}
a{
color:#C8DCE5;
}
h3{
margin: 10px 10px 0 10px;
color:#FFF;
font:18pt Arial, sans-serif;
letter-spacing:-1px;
font-weight: bold;
}
.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;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}
.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)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}


 

jQuery Code :

$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.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});
});
//Horizontal Sliding
$('.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});
});
//Diagnal Sliding
$('.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});
});
//Partial Sliding (Only show some of background)
$('.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});
});
//Full Caption Sliding (Hidden to Visible)
$('.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});
});
//Caption Sliding (Partially Hidden to Visible)
$('.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 Code :

<div class="boxgrid captionfull"><img src="jareck.jpg" alt="" /></div>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
Artist
<a href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></div>
<div class="boxgrid caption"><img src="kamil.jpg" alt="" /></div>
<div class="cover boxcaption">
<h3>Kamil Smala</h3>
Artist
<a href="http://www.nonsensesociety.com/2009/03/the-art-of-kamil-smala/" target="_BLANK">More Work</a></div>
<div class="boxgrid slideright"><img class="cover" src="martin.jpg" alt="" /></div>
<h3>Martin Stranka</h3>
Photographer
<a href="http://www.nonsensesociety.com/2009/03/photography-by-martin-stranka/" target="_BLANK">More Work</a>
<div class="boxgrid thecombo"><img class="cover" src="florian.jpg" alt="" /></div>
<h3>Florian Nicolle</h3>
Graphic Designer
<a href="http://www.nonsensesociety.com/2009/03/portrait-week-florian-nicolle/" target="_BLANK">More Work</a>
<div class="boxgrid slidedown"><img class="cover" src="nonsense.jpg" alt="" /></div>
<h3>The Nonsense Society</h3>
Art, Music, Word
<a href="http://www.nonsensesociety.com" target="_BLANK">Website</a>
<div class="boxgrid peek"><a href="http://feeds2.feedburner.com/buildinternet" target="_BLANK"><img src="birss.jpg" alt="" /></a>
<a href="http://www.buildinternet.com" target="_BLANK"><img class="cover" src="buildinternet.jpg" alt="" /></a></div>


下载:
http://buildinternet.com/live/boxes/

站点统计