快捷導(dǎo)航

javascript淡入淡出效果的實(shí)現(xiàn)思路

更新時(shí)間：2012年03月31日 01:55:52 作者：

這個(gè)思路是最近寫XScroll.js類的時(shí)候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實(shí)只需要一半就行了

如題，只有思路，沒有代碼。

這個(gè)思路是最近寫XScroll.js類的時(shí)候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經(jīng)過分析，我覺得其實(shí)只需要一半就行了。

比如寫一個(gè)圖片切換類，切換效果是淡入淡出，通常我們會(huì)這樣寫：當(dāng)切換發(fā)生的時(shí)候，當(dāng)前顯示的圖片淡出（漸漸隱藏），將要顯示的圖片淡入（漸漸出現(xiàn)），通常兩張圖片的動(dòng)畫速度是一致的，以便實(shí)現(xiàn)當(dāng)前圖片完全隱藏之時(shí)就是下一張圖片完全顯示之日。

我們來列一個(gè)簡(jiǎn)單的步驟：

當(dāng)前圖片漸隱，透明度由100%變成90%；同時(shí)下一張圖片漸顯，透明度由0變成10.
當(dāng)前圖透明度80%，下張圖透明度20%
當(dāng)前圖70%，下張圖30%。
。。。。
當(dāng)前圖10%，下張圖90%
完成切換
其實(shí)，這樣做完全是一種浪費(fèi)！

我們想一想，如果下張圖zIndex位于當(dāng)前圖之上，當(dāng)它漸顯的時(shí)候，因?yàn)樵絹碓讲煌该?，所以視覺上，他下層的當(dāng)前圖片看起來就越來越透明！

比如，下張圖透明度為20%的時(shí)候，因?yàn)樗采w在當(dāng)前圖上，所以當(dāng)前圖片看起來透明度就是100%-20%=80%！

所以，在制作淡入淡出切換效果的時(shí)候，其實(shí)只需要淡入效果即可，淡入的同時(shí)，淡出就發(fā)生著；淡入結(jié)束時(shí)，就是淡出終結(jié)。這樣一來，永遠(yuǎn)不用擔(dān)心淡入與淡出不同步的問題。

關(guān)鍵是，這樣一來只用同時(shí)循環(huán)設(shè)置一張圖片的透明度（即下張圖），不用管被擋住的這張（即當(dāng)前圖），節(jié)約了一半的運(yùn)算。這也算是優(yōu)化了javascript的執(zhí)行效率吧？

所以，我實(shí)現(xiàn)淡入淡出切換效果的思路就是：

將下一張圖片的zIndex設(shè)置于當(dāng)前圖片之上
下一張圖片進(jìn)行淡入（漸顯）循環(huán)；當(dāng)前圖片不操作。
淡入進(jìn)行時(shí)，淡出同步發(fā)生；淡入完成，淡出同時(shí)完成。
注：此思路只適合于當(dāng)前圖與下一張圖重疊的情況（大部分時(shí)候都是這樣）。

您可能感興趣的文章:

淡入淡出

相關(guān)文章

使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析
這篇文章主要介紹了使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析，文章通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
詳解JS數(shù)組Reduce()方法詳解及高級(jí)技巧
reduce 為數(shù)組中的每一個(gè)元素依次執(zhí)行回調(diào)函數(shù)，不包括數(shù)組中被刪除或從未被賦值的元素。接下來通過本文給大家分享JS數(shù)組Reduce()方法詳解及高級(jí)技巧，一起看看吧
2017-08-08
用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例
這篇文章主要介紹了用POSTMAN發(fā)送JSON格式的POST請(qǐng)求示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09
JS 設(shè)計(jì)模式之：工廠模式定義與實(shí)現(xiàn)方法淺析
這篇文章主要介紹了JS 設(shè)計(jì)模式之：工廠模式,結(jié)合實(shí)例形式分析了JS 工廠模式基本概念、原理、定義、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
javascript中onmouse事件在div中失效問題的解決方法
我們預(yù)期只有當(dāng)鼠標(biāo)從div中移開的時(shí)候才會(huì)觸發(fā)onmouseout事件，可事實(shí)上，當(dāng)我們移到div中的元素時(shí)，例如：本例中的a標(biāo)簽時(shí)，就會(huì)觸發(fā) onmousout事件
2012-01-01
JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)顏色的10進(jìn)制轉(zhuǎn)化成rgba格式的方法,涉及javascript針對(duì)顏色數(shù)值轉(zhuǎn)換的相關(guān)運(yùn)算操作技巧,需要的朋友可以參考下
2017-09-09
JavaScript限定復(fù)選框的選擇個(gè)數(shù)示例代碼
有10個(gè)復(fù)選框，用戶最多只能勾選3個(gè)，否則就灰掉所有復(fù)選框，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
BootStrapTable服務(wù)器分頁實(shí)例解析
項(xiàng)目中經(jīng)常會(huì)使用到表格，數(shù)據(jù)量大的時(shí)候還需要進(jìn)行分頁，項(xiàng)目設(shè)計(jì)階段，我選擇了bootstrapTable的js插件，個(gè)人覺得這個(gè)框架非常好用，支持服務(wù)器端分頁，此篇主要寫的主要是關(guān)于服務(wù)器分頁,需要的朋友可以參考下
2016-12-12
javascript獲取url上某個(gè)參數(shù)的方法
獲取url上的某個(gè)參數(shù)的方法有很多，在本文為大家介紹下使用javascript是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過
2013-11-11
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺(tái)開發(fā)工具,支持在一套代碼中開發(fā)出運(yùn)行于各大平臺(tái)的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下
2023-09-09