快捷導(dǎo)航

Javascript實現(xiàn)仿WebQQ界面的“浮云”兼容 IE7以上版本及FF

更新時間：2011年04月27日 01:02:24 作者：

兼容:IE7以上版本及FF；（騰訊的WebQQ3.0好像也不兼容IE6,其實這樣挺好的）

上圖片素材先：

背景圖片:

浮云圖片: ←——————————這里是有圖片D~ 全選就能看見了（因為背景是白的，云也是白的嘛~）……
CSS代碼：

 
<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
} 
body 
{ 
background: url("Images/body_bg.jpg") repeat center 0 fixed; 
} 
.cloud 
{ 
background: url("Images/cloud1.png"); 
height: 250px; 
width: 580px; 
position: absolute; 
} 
.hScroll 
{ 
overflow: hidden; 
} 
</style> 

理解: .hScroll 是為了讓瀏覽器的滾動條隱藏；其他一看就明白咋回事，我也不廢話了；
body里的代碼：

復(fù)制代碼代碼如下:

 
<body onload="StartMove()"> 
<div class="cloud" id="moveCloud"> 
</div> 
</body> 

理解：頁面加載的時候調(diào)用StarMove()函數(shù)；
Javascript代碼：

復(fù)制代碼代碼如下:

 
<script language="javascript" type="text/javascript"> 
var cloud = null; 
var left = 0; 
document.documentElement.className = "hScroll"; 
function StartMove() { 
cloud = document.getElementById("moveCloud"); 
setInterval(Move, 100); 
} 
function Move() { 
left += 1; 
cloud.style.left = left + "px"; 
if (left >= (screen.width)) { 
left = -580; 
} 
} 
</script> 

理解：document.documentElement.className = "hScroll"; 是調(diào)用css樣式中的代碼，目的是為了隱藏瀏覽器的滾動條(廢話……上面不是說過了嘛^_^|| )
首先，我們要獲取“浮云”層的id，所以用到了 cloud = document.getElementById("moveCloud"); cloud是一個全局變量，上面已經(jīng)定義過了，所以在這里可以直接使用(老鳥勿噴，給新鳥看的).
然后再給他一個“計時器” setInterval(Move, 100); 調(diào)用100毫秒調(diào)用一次Move函數(shù)；
left += 1;等價于left=left+1; 配合上面的函數(shù)（每100毫秒調(diào)用一次嘛~）使用，然后再賦值給“浮云”層原來的坐標(biāo)；所以寫成了cloud.style.left = left + "px" ;
神馬？你問我left是什么東東？他是css樣式里的position的屬性?。〔恍拍阍贒W里寫個position冒號一下，看他出來不？
if (left >= (screen.width)) ； left = -580; 就是斷判如果“浮云”移動(距離左邊)的位置大于或者等于屏幕的寬度，我們就讓他從頭開始，把left的值設(shè)為-580；
為啥設(shè)-580?? 看CSS里面嘛，浮云的圖片大小是580*250嘛，也就是他的長度是580px;所以把他設(shè)成-580是為了讓它從右開始一點(diǎn)點(diǎn)顯示，不然一上來就顯示整張圖片，多嚇人啊~
廢了半天話，不知道大家（和我一樣菜的）看懂了沒有，下面的是完整的代碼，另存為.html文件試一下吧；圖片自己下載，別忘了改路徑！
完整代碼:

復(fù)制代碼代碼如下:

 
<!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> 
<title>背景圖片移動</title> 
<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
} 
body 
{ 
background: url("Images/body_bg.jpg") repeat center 0 fixed; 
} 
.cloud 
{ 
background: url("Images/cloud1.png"); 
height: 250px; 
width: 580px; 
position: absolute; 
} 
.hScroll 
{ 
overflow: hidden; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
var cloud = null; 
var left = 0; 
document.documentElement.className = "hScroll"; 
function StartMove() { 
cloud = document.getElementById("moveCloud"); 
setInterval(Move, 100); 
} 
function Move() { 
left += 1; 
cloud.style.left = left + "px"; 
if (left >= (screen.width)) { 
left = -580; 
} 
} 
</script> 
</head> 
<body onload="StartMove()"> 
<div class="cloud" id="moveCloud"> 
</div> 
</body> 
</html> 