Home > Developer > JavaScript
Subtitles in Kara OK will gradually light up as the song progresses. Because subtitles are not lit up one by one but gradually transitioned, we need to implement the effect through two layers on the webpage, the text of the two layers is the same, the color is different, and the bottom layer remains unchanged. The upper layer gradually draws the width to cover the lower layer, which achieves this effect. This principle is also true when this effect is achieved in Flash. This article provides a basic example to encourage you.
The focus is: The text size of the two layers is the same as the Row Height, and reasonable position, top, overflow, width style attributes, and nowrap HTML attributes are set for the second layer.
Note: different browsers may fail to achieve this effect because of their different interpretations of CSS and lack of support for certain attributes. Check the example in IE.
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> karaoke subtitle effect </title> </pead> <body> <table cellpadding =" 0 "cellspacing =" 0 "style =" border- collapse: collapse "bordercolor =" #111111 "width =" 100% "> <tr> <td width =" 100% "> who cares about how bitter my heart is, who cares about how bitter my heart is </td> </tr> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
