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

如何在每次点击文档时出现一个新的实例div（随机y位置）？
我的随机y位置是按照以下方式在jQuery中计算的，但是从我的css height: 500px;获取其值 - 我该如何使这个值响应？

Answer 1

使用函数构造函数添加div的对象实例，其中每个实例都使用data = [{id: "1", text: "1"}, {id: "2", text: "2"}]; <input id="test" type="hidden" />类而不是.box：

fiddle

#box

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

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

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

1 个答案: