欢迎来到好人卡资源网,专注网络技术资源收集,我们不仅是网络资源的搬运工,也生产原创资源。寻找资源请留言

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

网站源码 sky995 5年前 (2018-01-26) 986次浏览 0个评论

1.当转换页面时,标题改变


2.标题闪动,你有新的消息

也可以尝试浏览器兼容版

3.浏览器标题滚动跑马灯

烈日下的男人

1.当转换页面时,标题改变

  1. <script>
  2. document.addEventListener('visibilitychange',function(){
  3. if(document.visibilityState=='hidden') {
  4. normal_title=document.title;
  5. document.title='(づ ̄ 3 ̄)づ';
  6. }
  7. else
  8. document.title=normal_title;
  9. });
  10. </script>

2.标题闪动,你有新的消息

  1. <script language="JavaScript">
  2. step=0
  3. function flash_title()
  4. {
  5. step++
  6. if (step==3) {step=1}
  7. if (step==1) {document.title='【你有新的消息】'}
  8. if (step==2) {document.title='【      】'}
  9. setTimeout("flash_title()",380);
  10. }
  11. flash_title()
  12. </script>

也可以尝试浏览器兼容版

  1. <script language="JavaScript">
  2. setTimeout('flash_title()',2000); //2秒之后调用一次
  3. function flash_title()
  4. {
  5. //当窗口效果为最小化,或者没焦点状态下才闪动
  6. if(isMinStatus() || !window.focus)
  7. {
  8. newMsgCount();
  9. }
  10. else
  11. {
  12. document.title='订单管理中心-AOOXING';//窗口没有消息的时候默认的title内容
  13. window.clearInterval();
  14. }
  15. }
  16. //消息提示
  17. var flag=false;
  18. function newMsgCount(){
  19. if(flag){
  20. flag=false;
  21. document.title='【新订单】';
  22. }else{
  23. flag=true;
  24. document.title='【   】';
  25. }
  26. window.setTimeout('flash_title(0)',380);
  27. }
  28. //判断窗口是否最小化
  29. //在Opera中还不能显示
  30. var isMin = false;
  31. function isMinStatus() {
  32. //除了Internet Explorer浏览器,其他主流浏览器均支持Window outerHeight 和outerWidth 属性
  33. if(window.outerWidth != undefined && window.outerHeight != undefined){
  34. isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  35. }else{
  36. isMin = window.outerWidth <= 160 && window.outerHeight <= 27;
  37. }
  38. //除了Internet Explorer浏览器,其他主流浏览器均支持Window screenY 和screenX 属性
  39. if(window.screenY != undefined && window.screenX != undefined ){
  40. isMin = window.screenY < -30000 && window.screenX < -30000;//FF Chrome
  41. }else{
  42. isMin = window.screenTop < -30000 && window.screenLeft < -30000;//IE
  43. }
  44. return isMin;
  45. }
  46. </script>

3.浏览器标题滚动跑马灯

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>TITLE栏上滚动的文字</title>
  7. <script language=javascript >
  8. var text=document.title
  9. var timerID
  10. function newtext() {
  11. clearTimeout(timerID)
  12. document.title=text.substring(1,text.length)+text.substring(0,1)
  13. text=document.title.substring(0,text.length)
  14. timerID = setTimeout("newtext()", 100)
  15. }
  16. </script>
  17. </head>
  18. <body onload="newtext()"></body>
  19. </body>
  20. </html>
  21. <html>
  22. <head>

版权属于


好人卡资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:一些关于网页标题的动态js特效
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

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

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