Javascript實現仿WebQQ介面的“浮雲”相容 IE7以上版本及FF

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

片素材先：

背景圖片:

浮雲圖片: ←——————————這裡是有圖片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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More