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

news/2024/7/5 20:54:05

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 οnlοad="newtext()"></body>

</body>

</html>

<html>

<head>

转载于:https://www.cnblogs.com/HGNET/p/11447877.html


http://www.niftyadmin.cn/n/2815377.html

相关文章

25、rsync学习笔记

rsync&#xff1a;remote sync 优点&#xff1a;通过对比源目的文件&#xff0c;实现增量备份&#xff0c;传输速度快。可通过crontab实现自动化备份。缺点&#xff1a;由于需要对比源目的文件&#xff0c;所以比较耗时。但是由于crontab本身最小时间间隔的限制&#xff0c;数据…

centos搭建bug管理系统(禅道)

2019独角兽企业重金招聘Python工程师标准>>> 1.下载禅道安装包 http://dl.cnezsoft.com/zentao/9.7/ZenTaoPMS.9.7.stable.zbox_64.tar.gz 2.拷贝并解压安装包到centos的/opt/目录下tar -zxvf ZenTaoPMS.9.7.stable.zbox_64.tar.gz -C /opt 3.设置指向mysql./zbox …

linux查找截取一段时间的日志

查找一段时间的日志cd logs 下查找2018-08-08 00:00到2018-08-09 09:28 之问的日志sed -n /2018-08-08 00:00/,/2018-08-09 09:28/p catalina.out >catalina.log然后 cat catalina.log看一下时间

3D空间的旋转的各种等价形式

旋转矩阵 欧拉轴和角度&#xff08;旋转矢量&#xff09; 欧拉旋转 四元数

shell入门学习笔记-04作用域

系列目录与参考文献传送门: shell入门学习笔记-序章 作用域 局部变量local variable&#xff1a;只能在函数内部使用。全局变量global variable&#xff1a;可以在当前shell session中使用。环境变量environment variable&#xff1a;可以在其他shell session中使用。 全局变…

shell入门学习笔记-05-参数

系列目录与参考文献传送门: shell入门学习笔记-序章 参数 变量含义$0当前脚本的文件名。$n&#xff08;n≥1&#xff09;传递给脚本或函数的参数。n 是一个数字&#xff0c;表示第几个参数。例如&#xff0c;第一个参数是 $1&#xff0c;第二个参数是 $2。$#传递给脚本或函数…

shell入门学习笔记-06-字符串

系列目录与参考文献传送门: shell入门学习笔记-序章 字符串详解 三种字符串赋值方式 admindeMacBook-Pro:myshell admin$ n521 admindeMacBook-Pro:myshell admin$ str1hello$n str"the special charactor \$\ at line $n" admindeMacBook-Pro:myshell admin$ str…

shell入门学习笔记-07-运算符

系列目录与参考文献传送门: shell入门学习笔记-序章 运算符 算数运算符 原生bash不支持简单的数学运算&#xff0c;但是可以通过其他命令来实现&#xff0c;例如 awk 和 expr&#xff0c;expr 最常用。 admindeMacBook-Pro:myshell admin$ val$(expr 1 2) admindeMacBook-…