jquery - 在屏幕上隨機移動div的多個實例Y-position

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