【问题标题】:How do I make text inside the title tag animate using JavaScript?如何使用 JavaScript 使标题标签内的文本动画?
【发布时间】:2021-07-23 21:07:08
【问题描述】:

如何在标题中显示滚动(移动)消息?

 <title>Welcome to Some title</title>

将标题栏转换为动态,使用 JavaScript(不使用任何 CSS)显示附加信息。

【问题讨论】:

  • 如果你想移动文本使用marquee tag
  • 意味着您想要任何显示一些信息并在滚动时做动画的动画?
  • @user3091574 不,标题标签在 head 元素中,对此没有任何作用。

标签: javascript html


【解决方案1】:

这是一个引人注目的示例,当您的网页标签在浏览器中未处于活动状态时(onblur),可以让您的访问者返回。 This script will animate the original title text with an intro, the original title text is restored when the tab is returned to active state (focus).单击选项卡时,将恢复原始页面标题。对于社交媒体共享,强烈建议将原始页面标题文本与前置动画文本 (onblur) 结合起来。

$(function() {

var origTitle, animatedTitle, timer;

function animateTitle(newTitle) {
  var currentState = false;
  origTitle = document.title;  // save original title
  animatedTitle = "Hey There! " + origTitle;
  timer = setInterval(startAnimation, 2000);

  function startAnimation() {
    // animate between the original and the new title
    document.title = currentState ? origTitle : animatedTitle;
    currentState = !currentState;
  }
}

function restoreTitle() {
  clearInterval(timer);
  document.title = origTitle; // restore original title
}

// Change page title on blur
$(window).blur(function() {
    animateTitle();
});

// Change page title back on focus
$(window).focus(function() {
    restoreTitle();
});

});

【讨论】:

【解决方案2】:

您可以通过 JavaScript 在标题栏文本中添加标记。在博文中查看 Add Scrolling Marquee Effects Text to Title Bar

该页面的未修改内容,格式除外:

/*
    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>

【讨论】:

  • 我测试了上面的链接并且它正在工作。否决者请发表评论。
  • (不是反对者)您应该包含回答问题的相关文本,以防链接失效
【解决方案3】:

这是另一个。不过只能往前走…… 要使用:链接到文件并编写这行代码

var title = new MovingTitle("Desired title... ", 300, 10);
title.init();

第一个参数是想要的文字,下一个是更新间隔,10是可见字母的个数……

function MovingTitle(writeText, interval, visibleLetters) {
    var _instance = {};

    var _currId = 0;
    var _numberOfLetters = writeText.length;

    function updateTitle() {
        _currId += 1;
        if(_currId > _numberOfLetters - 1) {
            _currId = 0; 
        }

        var startId = _currId;
        var endId = startId + visibleLetters;
        var finalText;
        if(endId < _numberOfLetters - 1) {
            finalText = writeText.substring(startId, endId);
        } else {
            var cappedEndId = _numberOfLetters;
            endId = endId - cappedEndId;

            finalText = writeText.substring(startId, cappedEndId) +     writeText.substring(0, endId);
        }

        document.title = finalText; 
    }

    _instance.init = function() {
        setInterval(updateTitle, interval);
    };

    return _instance;
}

【讨论】:

    【解决方案4】:

    这是我的:

    function animateTitle(Title = "Hello, World!", delay = 300) {
        let counter = 0;
        let direction = true;
        aniTitle = setInterval(function () {
            if (counter == Title.length)
                direction = false;
            if (counter == false)
                direction = true;
            counter = (direction == true) ? ++counter : --counter;
            newtitle = (counter == 0) ? "" : Title.slice(0, counter);
            document.title = newtitle;
        }, delay)
    }
    

    【讨论】:

      猜你喜欢
      • 2020-02-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-09-08
      • 1970-01-01
      • 1970-01-01
      • 2021-06-09
      • 1970-01-01
      相关资源
      最近更新 更多