网页标题闪烁特效(Jquery和Javascript)

2012-05-17 01:33:53  来源:网页教学网 

钱柜娱乐Webjx文章简介:网页标题闪烁Jquery版本与Javascript版本。

 

霸气宣言:网页标题闪烁
作品类型:动态效果(动态JS、jQuery作品)
作品描述:网页标题闪烁Jquery版本与Javascript版本
 

 

Jquery版本

<!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>
 
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 
<script type="text/javascript" language="javascript">
 
$(document).ready(function(){
 
        title_default = $("title").text() ;
 
        show = "【新消息】"+title_default ;
 
        none = "【】"+title_default ;
 
        i =0 ;
 
        Flicker() ;
 
})
 
function Flicker () {
 
        setInterval("Change()",1000)
 
}
 
function Change () {
 
        if(i==0) {
 
                $("title").text(show)
 
                i = 1 ;
 
        }
 
        else {
 
                $("title").text(none)
 
                i = 0 ;
 
        }
 
}
 
</script>
 
</head>
 

<body>
 
</body>
 
</html>

Javascript版本

<!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>
 
<script type="text/javascript" language="javascript">
 
Flicker() ;
 
var title = document.getElementsByTagName("title") ;
 
var title_txt = title[0].firstChild.nodeValue ;
 
var show = "【新消息】"+title_txt ;
 
var none = "【】"+title_txt ;
 
var i = 0 ;
 < br />
function Flicker () {
 
        setInterval("Change()",1000)
 
}
 
function Change () {
 
        if(i==0) {
 
                title[0].firstChild.nodeValue = show ;
 
                i = 1 ;
 
        }
 
        else {
 
                title[0].firstChild.nodeValue = none ;
 
                i = 0 ;
 
        }
 
}
 
</script>
 
</head>
 

<body>
 
</body>
 
</html>

更多