網頁制作poluoluo文章簡介：使用jQuery制作滑動動畫效果的層.
使用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;
}
網頁制作poluoluo文章簡介：使用jQuery制作滑動動畫效果的層.
第二步 – 添加滑動動畫
下一步是選擇適合你的動畫，我提供了幾個預設的潛在需求（樣式）。試用一下他們，選擇一個符合你風格也是你需要的樣式。
$(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>
好吧。文章標題就這樣被我改了。不過，這樣對於中文更好理解。而文章這最後一段就不用全譯了。只要你知道，這些實例只是供你選擇，要創造出一個適合自己的，就要自己動手。如果你有什麼不懂的，歡迎到Tech Meme論壇來討論。這裡面沒有很多人，因為需要邀請。但，大家喜歡討論技術問題。如果你需要進來討論，請聯系我。不討論的就不用邀請碼了，因為你可以看到裡面的所有文章，除了下載資料