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