一些关于网页标题的动态js特效

1.当转换页面时,标题改变

<script>

document.addEventListener('visibilitychange',function(){

if(document.visibilityState=='hidden') {

normal_title=document.title;

document.title='(づ ̄ 3 ̄)づ';

}

else

document.title=normal_title;

});

</script>

2.标题闪动,你有新的消息

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

也可以尝试浏览器兼容版

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

3.浏览器标题滚动跑马灯

<!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>

posted @ 2019-09-02 17:42  木子欢儿  阅读(862)  评论(0编辑  收藏  举报