zoukankan      html  css  js  c++  java
  • 一些关于网页标题的动态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>

  • 相关阅读:
    python-单链表的实现
    python-树形结构和遍历
    python四种简单排序
    python数据类型
    python安装和配置
    Js 中的false,零值,null,undefined和空字符串对象
    console和chrom-tool
    js中声明Number的五种方式
    vue下拉搜索
    canvas猜数游戏
  • 原文地址:https://www.cnblogs.com/HGNET/p/11447877.html
Copyright © 2011-2022 走看看