页面随机浮动元素效果

由于公司需要在情人节板块在页面呈现随机浮动的气泡和玫瑰，这里保存下当时的代码；

可以单独写一个floatObject.js;

 

    var bodyWid = document.documentElement.clientWidth;
    var bodyHei = document.documentElement.clientHeight;
   
    //随机新建元素
    function createEle(){
    var maxleft = bodyWid - 50;
        var maxtop = bodyHei - 50;
        var count = Math.floor(Math.random()*10) + 15;
        console.log("count="+count);
        var htmlstr = '';
        for(var i = 0; i < count; i ++){
        if(Math.random()>0.4){
        htmlstr += '<div class="rose"></div>';
        }else{
htmlstr += '<div class="bubble"></div>';
        }
           
        }
        $("body").append(htmlstr);
        //赋值初始速度
        var casulSpeed = Math.floor(Math.random()*2) + 1;
        $(".rose").each(function(){
        var ele = $(this).get(0);
        var startdir =  Math.random();
ele.speedx = startdir > 0.5 ? casulSpeed:casulSpeed*-1;
ele.speedy = startdir < 0.5 ? casulSpeed:casulSpeed*-1;
ele.style.left  = Math.random()*maxleft +"px";
            ele.style.top  =   Math.random()*maxtop +"px";
        })


        $(".bubble").each(function(){
        var ele = $(this).get(0);
        var startdir =  Math.random();
ele.speedx = startdir > 0.5 ? casulSpeed:casulSpeed*-1;
ele.speedy = startdir < 0.5 ? casulSpeed:casulSpeed*-1;;
ele.style.left  = Math.random()*maxleft + "px";
            ele.style.top  =   Math.random()*maxtop + "px";
        })
    }


    //移动元素
    function moveEle(ele){
    var posx = Math.random() * bodyWid;
   var posy = Math.random() * bodyHei;
        var maxleft = bodyWid - 50;
        var maxtop = bodyHei - 50;


        if(ele.offsetLeft <= 0 || ele.offsetLeft >= maxleft ){
          ele.speedx =  ele.speedx * -1;
        }
        if( ele.offsetTop <= 0 ||  ele.offsetTop >= maxtop ){
           ele.speedy =  ele.speedy * -1;
        }
        ele.style.left  = ele.offsetLeft +  ele.speedx +"px";
        ele.style.top  =  ele.offsetTop + ele.speedy +"px";
    }