javascript - jquery - 在随机 Y 位置跨屏幕移动多个 div 实例

Question

我想使用 jquery 检测点击并将元素从屏幕右侧移动到屏幕左侧。

我已经实现了总体思路 ( fiddle )，但只针对一个 div，一次。

HTML:

<div class = "outer">         
    <div id = "box">       
    </div>             
</div>

CSS:

body { 
    overflow-x: hidden;
    height: 500px;
}

#box{
   height: 100px;
   width: 100px;
   background: #FF00FF;
   position: absolute;
   right: -100px;
}

JS:

$(document).ready(function(){
    $(document).click(function(){
        var bodyHeight = document.body.clientHeight;
        var randPosY = Math.floor((Math.random()*bodyHeight));
        $('#box').css('top', randPosY);
        $("#box").animate({left: '-100px'}, 5000);
    });
});

1. 如何使每次点击文档时出现一个新的实例 div(在随机的 y 位置)？
2. 我的随机 y 位置是在 jQuery 中按以下方式计算的，但它的值是从我的 css height: 500px; 中获取的 - 我怎样才能使这个值响应？

Answer 1

使用构造函数添加一个 div 的对象实例，其中每个实例都使用 .box 类而不是 #box:

fiddle

function SlidingDiv(bodyHeight){
    this.randPosY = Math.floor((Math.random()*bodyHeight));
    this.$div = $("<div>").addClass('box').appendTo('.outer');
};

SlidingDiv.prototype.slide = function(){
    this.$div.css('top', this.randPosY);
    this.$div.animate({left: '-100px'}, 5000);
};

$(document).ready(function(){
    $(document).click(function(){
        var bodyHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        var div = new SlidingDiv(bodyHeight);
        div.slide();
    });
});

编辑:要删除 div，您可以尝试完整的功能:

SlidingDiv.prototype.slide = function() {
    this.$div.css('top', this.randPosY);
    this.$div.animate({
        left: '-100px',
        duration: 5000,
        complete: function() { this.$div.remove(); }.bind(this)
    });
};