我的登陆背景

<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 );

 

posted @ 2016-10-13 16:57  geek0202  阅读(176)  评论(0)    收藏  举报