|
使用jQuery制作滑動(dòng)動(dòng)畫(huà)效果的層
基本原理
這些具有動(dòng)態(tài)效果的滑動(dòng)盒都基于同樣的基本原理。在你經(jīng)過(guò)想要"窺見(jiàn)"對(duì)象中的其他兩個(gè)項(xiàng)目，這個(gè)帶有".boxgrid"的DIV標(biāo)簽充當(dāng)著一個(gè)窗口。還不明白? 讓這個(gè)圖片來(lái)給你線索吧：
理解了這個(gè)基本原理之后，我們就可以利用滑動(dòng)元素的動(dòng)畫(huà)效果來(lái)揭開(kāi)或遮蓋住要展示的區(qū)域，以此來(lái)創(chuàng)造滑動(dòng)效果。
點(diǎn)擊預(yù)覽效果預(yù)覽 下載這個(gè)實(shí)例的源文件
第一步 – CSS 基礎(chǔ)工作
在上面給出基本結(jié)構(gòu)的啟示圖中，我們需要使用一點(diǎn)CSS來(lái)讓它顯示出預(yù)期的效果。下面這個(gè)CSS定義了查看窗口(.boxgrid) 并的在LEFT和TOP設(shè)定圖片的默認(rèn)POSITION，這對(duì)于滑動(dòng)時(shí)的重疊交代很重要。并且不要忘記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;
}
如果你不準(zhǔn)備用CSS來(lái)實(shí)現(xiàn)半透明的描述，可直接跳向第二步：
.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)";
}
現(xiàn)在，我們需要設(shè)定說(shuō)明層（caption box，覺(jué)得用層好過(guò)于盒）的默認(rèn)的起點(diǎn)。如果想讓其初始化的時(shí)候完全隱藏，這將需要設(shè)定TOP和LEFT為你的窗口(.boxgrid)的高和寬，（當(dāng)然）這是由所要滑動(dòng)的方向決定的。你也可以讓它在初始化的時(shí)候只顯示一部分，像這個(gè)（CSS所定義的）.caption和.boxcaption所給出的：
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
出處：幸福收藏夾
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 使用jQuery制作滑動(dòng)動(dòng)畫(huà)效果的層 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 使用jQuery制作滑動(dòng)動(dòng)畫(huà)效果的層 [1]
第 2 頁(yè) 
