Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
543 views
in Technique[技术] by (71.8m points)

html - How do I make text inside the title tag animate using JavaScript?

How do I show a scrolling (moving) message in the title?

 <title>Welcome to Some title</title>

Translate the titlebar into a dynamic that displays additional information using JavaScript (without any CSS).

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can add marque in the title bar text through JavaScript. See it in the blog post Add Scrolling Marquee Effects Text to Title Bar.

The unmodified contents of that page, except for the formatting:

/*
    Now you can add moving text to title bar of browser for your website or blog.
    Here is the code to do this. Add this code in your website or blog in a widget
    (after replacing YOUR TEXT with your desired text).
*/

<script language=javascript>
    var rev = "fwd";
    function titlebar(val){
        var msg  = "YOUR TEXT";
        var res = " ";
        var speed = 100;
        var pos = val;
        msg = "   |-"+msg+"-|";
        var le = msg.length;
        if(rev == "fwd"){
            if(pos < le){
                pos = pos+1;
                scroll = msg.substr(0,pos);
                document.title = scroll;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "bwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
        else {
            if(pos > 0) {
                pos = pos-1;
                var ale = le-pos;
                scrol = msg.substr(ale,le);
                document.title = scrol;
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
            else {
                rev = "fwd";
                timer = window.setTimeout("titlebar("+pos+")",speed);
            }
        }
    }
    titlebar(0);
</script>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...