线报网 / 网站特效 / 网站标题特效集合

网站标题特效集合

【摘要】 js 判断页面切换时,标题改变<!DOCTYPE html> <html lang="en"> <head......

js 判断页面切换时,标题改变

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is a test</title>
<script>
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden') {
normal_title=document.title;
document.title='(づ ̄ 3 ̄)づ';
}
else
document.title=normal_title;
});
</script>
</head>
<body>
<p>very 66666!</p>
</body>
</html>

此段代码 在切换页面后自动改变标题。js的简单应用。

标题闪动,你有新短消息特效

简洁版

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
</head>
<body>
<script language="JavaScript">
 step=0
 function flash_title()
 {
  step++
  if (step==3) {step=1}         
  if (step==1) {document.title='【你有新的消息】'}
  if (step==2) {document.title='【      】'}
  setTimeout("flash_title()",380);
 }
 flash_title()
</script>
思源博客思源思源思源思源思源思源思源小哥哥
</body>
</html>

兼容版

<script language="JavaScript"> 
setTimeout('flash_title()',2000); //2秒之后调用一次
function flash_title() 
{ 
  //当窗口效果为最小化,或者没焦点状态下才闪动
  if(isMinStatus() || !window.focus)
  {
    newMsgCount();
  }
  else
  {
    document.title='订单管理中心-AOOXING';//窗口没有消息的时候默认的title内容
    window.clearInterval();
  }
} 
//消息提示
var flag=false;
function newMsgCount(){
  if(flag){
    flag=false;
    document.title='【新订单】';
  }else{
    flag=true;
    document.title='【   】';
  }
  window.setTimeout('flash_title(0)',380); 
}
//判断窗口是否最小化
//在Opera中还不能显示
var isMin = false;
function isMinStatus() {
  //除了Internet Explorer浏览器,其他主流浏览器均支持Window outerHeight 和outerWidth 属性
  if(window.outerWidth != undefined && window.outerHeight != undefined){
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }else{
    isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  }
  //除了Internet Explorer浏览器,其他主流浏览器均支持Window screenY 和screenX 属性
  if(window.screenY != undefined && window.screenX != undefined ){
    isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome       
  }else{
    isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
  }
  return isMin;
}
</script>

浏览器标题滚动跑马灯

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE栏上滚动的文字</title>
<script language=javascript >
var text=document.title
var timerID
function newtext() {
clearTimeout(timerID)
document.title=text.substring(1,text.length)+text.substring(0,1)
text=document.title.substring(0,text.length)
timerID = setTimeout("newtext()", 100)
}
</script>
</head>
<body onload="newtext()"></body>
</body>
</html>
<html>
<head>


本文标签: JS实例 代码分享
版权声明:《 网站标题特效集合 》为作者 思源哥哥原创文章,转载请注明原文地址!
免责声明:思源资源网提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件(y#isiyuan.net)与我们联系处理。
本文地址:https://www.isiyuan.net/wztx/31.html
分享到:
打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

评论 (2)
  • 思源资源网
    WRZ

    来看看