通過(guò)CSS和JavaScript實(shí)現(xiàn)多層頁(yè)面多種切換效果及實(shí)例

文將向您展示如何創(chuàng)建簡(jiǎn)單而新式的頁(yè)面切換的過(guò)渡效果。也許你已經(jīng)發(fā)現(xiàn)了一些在或Keep Portland Weird等網(wǎng)站上看到的很酷的效果，其中兩層或多層疊加層在頁(yè)面上進(jìn)行動(dòng)畫(huà)處理以顯示一些新內(nèi)容。讓我們看看他們?nèi)绾巫龅竭@一點(diǎn)。我們只關(guān)注動(dòng)畫(huà)部分，而不是內(nèi)容的加載。對(duì)于效果，我們將使用CSS動(dòng)畫(huà)。

頁(yè)面框架

對(duì)于我們的簡(jiǎn)單演示，我們將創(chuàng)建一個(gè)完整的寬度和高度布局，其中一些箭頭將觸發(fā)疊加動(dòng)畫(huà)。想法是顯示一個(gè)頁(yè)面，并在疊加動(dòng)畫(huà)的中間，切換到另一個(gè)頁(yè)面。雖然使用的是靜態(tài)內(nèi)容，但你可以在動(dòng)畫(huà)過(guò)程中插入動(dòng)態(tài)解決方案，以便即時(shí)獲取一些數(shù)據(jù)。

我們的HTML標(biāo)簽如下：

疊加層的結(jié)構(gòu)將使用JavaScript插入，它作為一個(gè)固定元素放在所有其他元素之上。根據(jù)頁(yè)面指示方向，為該元素提供一些CSS樣式類，以正確地應(yīng)用樣式。疊加層將包含預(yù)先定義好的多個(gè)層。每個(gè)層都設(shè)置不同的背景顏色以及特定的動(dòng)畫(huà)。

頁(yè)面代碼類似如：

每層還設(shè)置不同的背景顏色。為了展示獨(dú)特的效果，將為每個(gè)層設(shè)置不同的動(dòng)畫(huà)。為此，我們最初將父層設(shè)置為屏幕外（off-screen）位置，然后將該層動(dòng)畫(huà)化。主要元素的初始設(shè)置在腳本中完成（見(jiàn)下文）。然后在樣式表中定義層的動(dòng)畫(huà)行為，這取決于效果類，以及要顯示的頁(yè)面的其他樣式。

CSS

首先，讓我們看一下我們的主體，容器和頁(yè)面的一些常規(guī)樣式（省略供應(yīng)商前綴）：

我們希望我們的頁(yè)面是全寬和高度，并隱藏任何溢出。默認(rèn)情況下，使用JS（我們使用Modernizr），頁(yè)面被隱藏，當(dāng)前類將相應(yīng)的頁(yè)面設(shè)置為可見(jiàn)。我們希望確保我們的布局在沒(méi)有JavaScript的情況下正常運(yùn)行，因此我們添加了"條件"樣式。

讓我們來(lái)展示的風(fēng)格是怎樣的。我們開(kāi)始層置于所有之上，而且具有固定的位置：

根據(jù)當(dāng)前使用的方向，需要設(shè)置一些初始定位樣式。正如稍后將看到的JavaScript角本，我們將設(shè)置一些其他的變換，以確保我們的初始層的頂部始終是面向屏幕的那個(gè)。這將簡(jiǎn)化效果，因?yàn)閮?nèi)層動(dòng)畫(huà)將始終相同（向上移動(dòng)），因此如果父項(xiàng)旋轉(zhuǎn)并正確定位，我們無(wú)需為每個(gè)方向定義新動(dòng)畫(huà)：

圖層將具有默認(rèn)背景顏色，然后以動(dòng)態(tài)方式為每個(gè)效果單獨(dú)定位：

接下來(lái)，讓我們看看一個(gè)示例效果。三層效果通過(guò)特殊的為每個(gè)圖層添加動(dòng)畫(huà)。anim-Effect類被添加到主體中，以便我們知道我們目前使用的是哪種效果。該revealer–animate是考慮到初始順序和觸發(fā)動(dòng)畫(huà)。

正如我們?cè)谶@里看到的，我們將向所有圖層添加相同的動(dòng)畫(huà)屬性，但動(dòng)畫(huà)名稱除外。通過(guò)三種不同的動(dòng)畫(huà)，我們定義了關(guān)鍵幀中每個(gè)動(dòng)畫(huà)的延遲。就像我們一樣，我們確保所有動(dòng)畫(huà)在同一時(shí)刻結(jié)束，但允許不同的外觀時(shí)間：

我們?cè)谶@里做的是讓第一層先移動(dòng)，然后在中間"暫停"直到75％，同時(shí)在可見(jiàn)屏幕的頂部。然后我們將其移向相反的方向以顯示新內(nèi)容。對(duì)于其他兩個(gè)層也是如此，只是在這里我們?cè)诓煌年P(guān)鍵幀處啟動(dòng)它們，減少"暫停"。最后一層根本沒(méi)有暫停，只是從25％開(kāi)始到另一邊。

JavaScript

我們做了一個(gè)小插件，根據(jù)一些選項(xiàng)創(chuàng)建了revealer 。默認(rèn)選項(xiàng)如下：

添加啟動(dòng)器及其圖層和相應(yīng)效果類的功能如下所示：

最關(guān)鍵的函數(shù)設(shè)置我們的揭密元素的初始定位，并添加用于觸發(fā)動(dòng)畫(huà)和所選效果的控件類。

根據(jù)我們選擇的方向，我們需要確保揭示元素獲得正確的變換。請(qǐng)記住，我們只是簡(jiǎn)單地旋轉(zhuǎn)和定位探測(cè)器，使頂部始終面向屏幕，以便層始終向上移動(dòng)。對(duì)于角落情況，我們需要確保展示器的寬度和高度正確設(shè)置到頁(yè)面的對(duì)角線。對(duì)于左右兩種情況，我們需要確保展示器的高度是屏幕的寬度，因?yàn)槲覀儗⑺D(zhuǎn)90度。

以上講述了通過(guò)CSS和JavaScript實(shí)現(xiàn)多層頁(yè)面的切換動(dòng)畫(huà)效果，希望這個(gè)小的技巧能對(duì)你有所幫助。如果感興趣，你還可以訪問(wèn)以下地址，查看動(dòng)畫(huà)的效果的Demo。

http://www.ikinsoft.com/demo/ani_effects/index.html

著html5的來(lái)襲，我們不難發(fā)現(xiàn)，生活工作中瀏覽的網(wǎng)站也變的高大上起來(lái)，在這背后我們就要考慮這些高大上的效果如何去實(shí)現(xiàn)，如何更接地氣，那么我們今天來(lái)說(shuō)一個(gè)簡(jiǎn)單的小例子：利用CSS3動(dòng)畫(huà)知識(shí)實(shí)現(xiàn)三角形疊加效果，來(lái)來(lái)來(lái)看圖說(shuō)話。

CSS3三角形疊加效果

看完動(dòng)態(tài)效果大家更想知道其代碼設(shè)計(jì)咯，我們一起來(lái)看核心代碼：

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

更多詳細(xì)實(shí)現(xiàn)過(guò)程，可以點(diǎn)擊如下講解：

更多案例分享可加群142991222關(guān)注

邊距重疊

外邊距重疊指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的高度如果都是正邊界，邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對(duì)值最大的負(fù)邊界。如果沒(méi)有正邊界，則從零中減去絕對(duì)值最大的負(fù)邊界。只有外邊距才可以是負(fù)值，內(nèi)邊距不允許為負(fù)值在 CSS 中，相鄰的兩個(gè)盒子的外邊距可以結(jié)合成一個(gè)單獨(dú)的外邊距，這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

重疊情況

1、兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊的結(jié)果是它們兩者之間較大的值

2、兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值得較大值

3、兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和

4、外邊距不重疊的情況

水平 margin 永遠(yuǎn)不會(huì)重合

設(shè)置了 overflow 屬性(visible 除外)的元素和它的子元素之間的 margin 不會(huì)重疊

設(shè)置了絕對(duì)定位（ --tt-darkmode-color: #9E9ECD;">設(shè)置了 display:inline-block 的元素，垂直 margin 不會(huì)重疊，和子元素之間也不會(huì)重疊

根元素(如 html)與 body 的 margin 不會(huì)重疊

5、防止外邊距重疊的方法

元素絕對(duì)定位 postion:absolute;一般用在內(nèi)層元素

內(nèi)層元素加 float:left;或 display:inline-block;

外層元素用 padding 增加邊距

外層元素設(shè)置 overflow:hidden;

內(nèi)層元素透明邊框 border:1px solid transparent;

在線咨詢

上一篇：前端入門(mén)-JavaScript 操作符
下一篇：HTML5需要了解的特性

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

通過(guò)CSS和JavaScript實(shí)現(xiàn)多層頁(yè)面多種切換效果及實(shí)例

頁(yè)面框架

CSS

JavaScript

您的項(xiàng)目需求