你又在看草x社區啊?!|网站标题特效集合

  • 首页 > 教程
  • 作者:jaz
  • 时间: 2017年11月26日 2:10
  • 字数:4469 个
  • 字号:
  • 评论:1 条
  • 浏览:2434 次
  • 百度:百度已收录
  • 分类: 教程
  • 时间:2017-11-26 2:10 热度:2434° 评论:1 条 

    你又在看草x社區啊?!

    不!我在看jialezi`s blog!


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


    本文转自:遇见心流

    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://blog.jialezi.net/?post=104
    版权声明:若无特殊注明,本文皆为《jaz》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗

    已有1条吐槽

    匿名

    2017-11-26 20:45 浙江省宁波市联通
    楼主blog真炫
     未知操作系统   未知浏览器

    返回顶部    返回首页    手气不错    捐赠支持         
    版权所有:Jialezi `s blog    站点维护: jaz    +主题:海云彩色