如何使用JavaScript在标题标签内制作动画？ [英] How do I make text inside the title tag animate using JavaScript?

问题描述

 < title> Welcome to Some title< title>如何在标题中显示滚动（移动） /标题> 
  

将标题栏转换为使用JavaScript显示附加信息的动态（不含任何CSS）。

解决方案

这是一个引人注目的示例，当您的网页选项卡在浏览器中无效时（onblur）该脚本将通过介绍为原始标题文本添加动画，当标签返回活动状态（焦点）时，原始标题文本将被恢复。点击标签后，原始页面标题被恢复。对于社交媒体分享，强烈建议将原始页面标题文本与前面的动画文本（onblur）一起包含在内。

  $（ function（）{
 
 var origTitle，animatedTitle，timer; 
 
函数animateTitle（newTitle）{
 var currentState = false; 
 origTitle = document。 title; //保存原始标题
 animatedTitle =Hey There！+ origTitle; 
 timer = setInterval（startAnimation，2000）; 
 
 function startAnimation（）{
 //在原始标题和新标题之间设置动画
 document.title = currentState？origTitle：animatedTitle; 
 currentState =！currentState; 
} 
} 
 
函数restoreTitle（）{
 clearInterval（timer）; 
 document.title = origTitle; //恢复原始标题
} 
 
 //更改页面标题模糊
 $（窗口）.blur（函数（）{
 animateTitle（）; 
}）; 
 
 //将焦点改回焦点
 $（window）.focus（function（） {
 restoreTitle（）; 
}）; 
 
}）; 
  

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).

解决方案

Here's an eye catching example to get your visitors back when your web page tab is not active within the browser (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). When the tab is clicked the original page title is restored. For social media sharing it is highly recommended to include the original page title text with the prefaced animated text (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();
});

});

这篇关于如何使用JavaScript在标题标签内制作动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！