The subtitles in the karaoke will gradually light up as the song progresses, because the subtitles is not a place to light but gradually transition, so we implement the effect in the Web page, through two layers to achieve, two layers of the same text, different colors, the bottom is unchanged, the upper layer gradually Lacoine to cover the lower level, the realization of the effect, in This principle is also true when implementing this effect in Flash. This article gives the basic example to give a try.
The point is that the text size and row height of the two layers are the same, setting the reasonable position, top, overflow, width style properties, and nowrap HTML attributes for the second layer.
Note that different browsers may not be able to achieve this effect because of different interpretations of CSS and lack of some attribute support, please see the example in IE.
<textarea id="runcode98362"><ptml> <pead> <meta http-equiv= "Content-type" content= "text/html charset=gb2312" > <title& GT, Karaoke effect </title> </pead> <body> <table cellpadding= "0" cellspacing= "0" bordercolor= "#111111 "Width=" 100% "> <tr> <td width=" 100% "> <div > Who cares how bitter my heart is. </div> <div id=" AV " Nowrap> who cares how bitter my heart </div></td> </tr> </table> <script type= "Text/javascript" language= "JavaScript" > <!--var av = document.getElementById ("av"); function Musicgo () {var width = parseint (av.style.width); 140 of the reason is the font size by word if (width < 140) {Av.style.width = (width + 1) + "px"; else {av.style.width = "0px"; } av.style.width = "0px";//because it is not specified in the previous style sheet, you must specify SetInterval ("Musicgo ();", 10) in JavaScript; --> </script> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
