使用jQuery製作滑動動畫效果的層

2021-09-30 15:54:31 字數 1540 閱讀 2111

基本原理

這些具有動態效果的滑動盒都基於同樣的基本原理。在你經過想要"窺見"物件中的其他兩個專案,這個帶有".boxgrid"的div標籤充當著乙個視窗。還不明白? 讓這個來給你線索吧:

理解了這個基本原理之後,我們就可以利用滑動元素的動畫效果來揭開或遮蓋住要展示的區域,以此來創造滑動效果。

第一步 – css 基礎工作

在上面給出基本結構的啟示圖中,我們需要使用一點css來讓它顯示出預期的效果。下面這個css定義了檢視視窗(.boxgrid) 並的在left和top設定的預設position,這對於滑動時的重疊交代很重要。並且不要忘記overflow:hidden將使這一切成為可能。

.boxgrid

.boxgrid img

如果你不準備用css來實現半透明的描述,可直接跳向第二步:

.boxcaption

現在,我們需要設定說明層(caption box,覺得用層好過於盒)的預設的起點。如果想讓其初始化的時候完全隱藏,這將需要設定top和left為你的視窗(.boxgrid)的高和寬,(當然)這是由所要滑動的方向決定的。你也可以讓它在初始化的時候只顯示一部分,像這個(css所定義的).caption和.boxcaption所給出的:

.captionfull .boxcaption

.caption .boxcaption

第二步 – 新增滑動動畫

下一步是選擇適合你的動畫,我提供了幾個預設的潛在需求(樣式)。試用一下他們,選擇乙個符合你風格也是你需要的樣式。

$(document).ready(function(),);

}, function() ,);

});//水平沒去

$('.boxgrid.slideright').hover(function(),);

}, function() ,);

});//比例縮放滑動

$('.boxgrid.thecombo').hover(function(),);

}, function() ,);

});//部分滑動 (只顯示一部分背景)

$('.boxgrid.peek').hover(function(),);

}, function() ,);

});//完全滑動的說明 (從完全隱藏到完全顯示)

$('.boxgrid.captionfull').hover(function(),);

}, function() ,);

});//部分滑動的說明 (部分顯示-部分隱藏)

$('.boxgrid.caption').hover(function(),);

}, function() ,);

});});

第三步 – html

這裡需要一些類(class)來作為jquery的選擇器,在心裡存著這樣的標準:

這是乙個我將用在.captionfull動畫的html例子:

artist

more work

使用jQuery製作滑動動畫效果的層

這些具有動態效果的滑動盒都基於同樣的基本原理。在你經過想要 窺見 物件中的其他兩個專案,這個帶有 boxgrid 的div標籤充當著乙個視窗。基本原理 理解了這個基本原理之後,我們就可以利用滑動元素的動畫效果來揭開或遮蓋住要展示的區域,以此來創造滑動效果。點選預覽效果預覽 第一步 css 基礎工作 ...

jQuery自學筆記(三) jQuery動畫效果

jquery隱藏和顯示 使用 hide 和 show 方法來隱藏和顯示 html 元素 語法 selector hide speed,callback selector show speed,callback 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒,可...

iOS開發之開機經典滑動動畫

1首先定義 inte ce viewcontroller end 2 在viewdidload中實現 這裡出現了calayer的另乙個子類cagradientlayer,這個類的作用就是能在layer上繪製出漸變顏色的效果,然後在viewdidload 中新增如下 gridentlayer cagr...