欢迎来到好人卡资源网，专注网络技术资源收集，我们不仅是网络资源的搬运工，也生产原创资源。寻找资源请留言或关注公众号:烈日下的男人

> 网站源码 > 一些关于网页标题的动态js特效

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

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

本文及资源最后更新时间 2018-01-26 by sky995

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

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

也可以尝试浏览器兼容版

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

烈日下的男人

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>

版权属于

好人卡资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：一些关于网页标题的动态js特效