<div id="mainBody">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
</div>
@charset "utf-8";
/* CSS Document */
body{background-color:#1c77ac; background-image:url(../images/light.png); background-repeat:no-repeat; overflow:hidden; margin:0; padding:0;}
#mainBody {width:100%;height:100%;position:absolute;z-index:0;}
.cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/cloud.png) no-repeat;z-index:1;opacity:0.5;}
#cloud1 {z-index:2;}
#cloud2 {z-index:2;}
// JavaScript Document
//纯JS写法,可以不引用jquery.min.js文件
var $main = $cloud = $body = mainwidth = null;
var offset1 = 450;
var offset2 = 0;
var offsetbg = 0;
$main = document.getElementById("mainBody");
$body = document.body; //document.getElementsByTagName("body");
$cloud1 = document.getElementById("cloud1");
$cloud2 = document.getElementById("cloud2");
mainwidth = $main.clientWidth;
/// 飘动
setInterval(function flutter() {
if (offset1 >= mainwidth) {
offset1 = -580;
}
if (offset2 >= mainwidth) {
offset2 = -580;
}
offset1 += 1.1;
offset2 += 1;
$cloud1.style.backgroundPosition = offset1+"px 100px";
$cloud2.style.backgroundPosition = offset2+"px 460px";
//$cloud1.css("background-position", offset1 + "px 100px")
//$cloud2.css("background-position", offset2 + "px 460px")
}, 70);
setInterval(function bg() {
if (offsetbg >= mainwidth) {
offsetbg = -580;
}
offsetbg += 0.9;
$body.style.backgroundPosition = -offsetbg + "px 0";
//$body.css("background-position", -offsetbg + "px 0")
}, 90 );