3种网页标题动态js特效

  • 内容
  • 相关
1.当转换页面时,标题改变

<script>
document.addEventListener('visibilitychange',function(){
if(document.visibilityState=='hidden') {
normal_title=document.title;
document.title='转换页面时的网页标题';
}
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>
这里是按123顺序来显示达到闪动效果,如果需要更多效果可以增加几条if,注意首末一致。

   你也可以尝试下面的浏览器兼容版

<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.浏览器标题滚动跑马灯


<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>
然后在body标签里面加上
<body onload="newtext()">

加上这个onload

。。请注意,以上js加到网页任何地方,最好是加在head标签内

热度:409° 评分:8.7 发布时间: 2018年2月13日

本文标签:

版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。

本文链接:3种网页标题动态js特效 - https://www.wuiso.com/post-961.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注