• 欢迎访问情深深几许的博客网站,这里有免费网络资源信息,WordPress教程,Python、MySQL教程
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏本网站吧

网站标题特效

html luckzk 5年前 (2019-05-20) 669次浏览 0个评论

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

<!DOCTYPE html>

<html>

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

jialezi `s blog

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


情深几许 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:网站标题特效
喜欢 (0)
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址