卡拉 OK 字幕效果
更新時(shí)間：2006年08月27日 00:00:00 作者：
卡拉 OK 中的字幕隨著歌曲的進(jìn)行會(huì)逐漸點(diǎn)亮，由于字幕不是一個(gè)一個(gè)地點(diǎn)亮而是逐漸過(guò)渡，所以我們?cè)诰W(wǎng)頁(yè)中實(shí)現(xiàn)該效果時(shí)，要通過(guò)兩個(gè)層來(lái)實(shí)現(xiàn)，兩個(gè)層的文字相同，顏色不同，底層不變，上層逐漸拉寬以遮蓋下層，就實(shí)現(xiàn)了該效果，在 Flash 中實(shí)現(xiàn)這種效果時(shí)，也是本原理。本文給出基本示例，以求拋磚引玉。
重點(diǎn)是：兩層的文字大小和行高相同，為第二個(gè)層設(shè)置合理的 position、top、overflow、width 樣式屬性和 nowrap HTML 屬性。
注意，不同的瀏覽器可能因?yàn)閷?duì) CSS 的解釋不同和缺乏某些屬性支持，無(wú)法實(shí)現(xiàn)本效果，請(qǐng)?jiān)?nbsp;IE 中察看示例。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
重點(diǎn)是：兩層的文字大小和行高相同，為第二個(gè)層設(shè)置合理的 position、top、overflow、width 樣式屬性和 nowrap HTML 屬性。
注意，不同的瀏覽器可能因?yàn)閷?duì) CSS 的解釋不同和缺乏某些屬性支持，無(wú)法實(shí)現(xiàn)本效果，請(qǐng)?jiān)?nbsp;IE 中察看示例。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
本文主要介紹了JavaScript中清空數(shù)組的三種方式。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要介紹了JS生成隨機(jī)打亂數(shù)組的方法,涉及javascript數(shù)組隨機(jī)排序的相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實(shí)例形式分析了scrollTop()方法和scroll()方法滾動(dòng)操作的用法與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
跟我學(xué)習(xí)javascript的異步腳本加載
跟我學(xué)習(xí)javascript的異步腳本加載，告訴大家如何使自己的站點(diǎn)更快捷，以及最簡(jiǎn)單的方法 利用什么樣的工具達(dá)到預(yù)期效果，想一探究竟的朋友可以參考一下這篇文章。2015-11-11
當(dāng)鼠標(biāo)移出灰色區(qū)域時(shí)候,菜單項(xiàng)怎么隱藏起來(lái)
當(dāng)鼠標(biāo)移出灰色區(qū)域時(shí)候,菜單項(xiàng)怎么隱藏起來(lái)...2007-11-11
微信小程序?qū)崿F(xiàn)的canvas合成圖片功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的canvas合成圖片功能,結(jié)合實(shí)例形式分析了微信小程序canvas合成圖片相關(guān)組件使用、操作步驟與注意事項(xiàng),需要的朋友可以參考下2019-05-05
微信小程序調(diào)用天氣接口并且渲染在頁(yè)面過(guò)程詳解
這篇文章主要介紹了微信小程序調(diào)用天氣接口并且渲染在頁(yè)面過(guò)程詳解，今天寫(xiě)一個(gè)具體的例子，調(diào)用一個(gè)免費(fèi)的天氣接口的api，并且把所獲取的內(nèi)容展示在前端的界面，前端界面與 iView Weapp結(jié)合,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)用戶注冊(cè)界面功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)滑動(dòng)操作代碼，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
Array的push與unshift方法都能給當(dāng)前數(shù)組添加元素，不同的是，push是在末尾添加，而unshift則是在開(kāi)頭添加。2011-03-03