DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript實現仿WebQQ界面的“浮雲”兼容 IE7以上版本及FF
Javascript實現仿WebQQ界面的“浮雲”兼容 IE7以上版本及FF
編輯:關於JavaScript     
上圖片素材先:

背景圖片:

浮雲圖片: ←——————————這裡是有圖片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裡的代碼:
復制代碼 代碼如下:
<body onload="StartMove()">
<div class="cloud" id="moveCloud">
</div>
</body>

理解:頁面加載的時候調用StarMove()函數;
Javascript代碼:
復制代碼 代碼如下:
<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"; 是調用css樣式中的代碼,目的是為了隱藏浏覽器的滾動條(廢話……上面不是說過了嘛^_^|| )
首先,我們要獲取“浮雲”層的id,所以用到了 cloud = document.getElementById("moveCloud"); cloud是一個全局變量,上面已經定義過了,所以在這裡可以直接使用(老鳥勿噴,給新鳥看的).
然後再給他一個“計時器” setInterval(Move, 100); 調用100毫秒調用一次Move函數;
left += 1;等價於left=left+1; 配合上面的函數(每100毫秒調用一次嘛~)使用,然後再賦值給“浮雲”層原來的坐標;所以寫成了cloud.style.left = left + "px" ;
神馬?你問我left是什麼東東?他是css樣式裡的position的屬性啊!不信你在DW裡寫個position冒號一下,看他出來不?
if (left >= (screen.width)) ; left = -580; 就是斷判如果“浮雲”移動(距離左邊)的位置大於或者等於屏幕的寬度,我們就讓他從頭開始,把left的值設為-580;
為啥設-580?? 看CSS裡面嘛,浮雲的圖片大小是580*250嘛,也就是他的長度是580px;所以把他設成-580是為了讓它從右開始一點點顯示,不然一上來就顯示整張圖片,多嚇人啊~
廢了半天話,不知道大家(和我一樣菜的)看懂了沒有,下面的是完整的代碼,另存為.html文件試一下吧;圖片自己下載,別忘了改路徑!
完整代碼:
復制代碼 代碼如下:
<!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>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved