|
第二步 – 添加滑動(dòng)動(dòng)畫
下一步是選擇適合你的動(dòng)畫，我提供了幾個(gè)預(yù)設(shè)的潛在需求（樣式）。試用一下他們，選擇一個(gè)符合你風(fēng)格也是你需要的樣式。
$(document).ready(function(){
//要更改上、下方向和左、右方向，只需要在top/left的值中添加"-"號(hào)（表示反方面）。
//垂直滑動(dòng)
$('.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});
});
//水平?jīng)]去
$('.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});
});
//比例縮放滑動(dòng)
$('.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});
});
//部分滑動(dòng) (只顯示一部分背景)
$('.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});
});
//完全滑動(dòng)的說明 (從完全隱藏到完全顯示)
$('.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});
});
//部分滑動(dòng)的說明 (部分顯示-部分隱藏)
$('.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的選擇器，在心里存著這樣的標(biāo)準(zhǔn)：
- DIV標(biāo)簽的類".cover"必須分配給任何一個(gè)想要滑動(dòng)的對(duì)象；
- 有.boxgrid類的DIV標(biāo)簽，圖片通常最先顯示。
這是一個(gè)我將用在.captionfull動(dòng)畫的HTML例子：
<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href=" </div>
</div>
好吧。文章標(biāo)題就這樣被我改了。不過，這樣對(duì)于中文更好理解。而文章這最后一段就不用全譯了。只要你知道，這些實(shí)例只是供你選擇，要?jiǎng)?chuàng)造出一個(gè)適合自己的，就要自己動(dòng)手。如果你有什么不懂的，歡迎到Tech Meme論壇來討論。這里面沒有很多人，因?yàn)樾枰?qǐng)。但，大家喜歡討論技術(shù)問題。如果你需要進(jìn)來討論，請(qǐng)聯(lián)系我。不討論的就不用邀請(qǐng)碼了，因?yàn)槟憧梢钥吹嚼锩娴乃形恼�，除了下載資料
點(diǎn)擊預(yù)覽效果預(yù)覽 下載這個(gè)實(shí)例的源文件
譯文原文：http://www.happinesz.cn/archives/1167/
本文鏈接：http://www.95time.cn/tech/web/2009/7201.asp 
出處：幸福收藏夾
責(zé)任編輯：bluehearts
上一頁(yè) 使用jQuery制作滑動(dòng)動(dòng)畫效果的層 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 使用jQuery制作滑動(dòng)動(dòng)畫效果的層 [2]
