3

下图是我正在尝试构建的内容： 随机框

想法是在整个页面加载之前隐藏所有框。然后他们应该在浏览器视口周围设置随机位置，然后需要对它们（框）进行动画处理以移动到适当的位置。

盒子在 CSS 中具有绝对位置，我的想法是当 windows 加载时将初始位置放入变量中，然后随机化盒子的位置，最后将其移动到起始位置。希望我很清楚:)

这是我当前的设置：http: //jsfiddle.net/HgMB4/

您会注意到我在窗口加载时缺少代码，因为我不确定如何将框设置为初始位置。

$(window).load(function(){
    //Huh! What to write here to animate boxes to their initial positions set by CSS?
});
4

3 回答 3

3

尝试这个

    $(document).ready(function(){
      var h = $(window).height();
      var w = $(window).width();            
      $('#intro .box').each(function(){
            var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = w-Math.floor(Math.random()*900),
            tTop  = h-Math.floor(Math.random()*900);

           $(this).animate({"left": tLeft , "top": tTop},5000,function(){
                           $this.animate({
                               "left": originalOffset.left, 
                               "top": originalOffset.top
                           },5000);

                        });        
    });
});
​

这会将盒子动画到随机位置，然后将它们移回原来的位置。

这是工作演示http://jsfiddle.net/HgMB4/18

如果您只想在盒子移动到初始位置时为它们设置动画，那么试试这个

$(document).ready(function(){
    var h = $(window).height();
    var w = $(window).width();            
    $('#intro .box').each(function(){
        var originalOffset = $(this).position(),
            $this = $(this),
           tLeft = w-Math.floor(Math.random()*900),
           tTop  = h-Math.floor(Math.random()*900);

        $(this).css({
            "left": tLeft,
            "top": tTop
        });

        $this.animate({ "left": originalOffset.left, 
                         "top": originalOffset.top
                     },5000);

    });
});
​
​

这是工作演示http://jsfiddle.net/HgMB4/22

于 2012-12-22T13:11:11.967 回答
1

要求

  • 在整个页面加载之前隐藏框
  • 框设置为浏览器视口周围的随机位置
  • 盒子需要动画到它们的正确位置

您可以存储原始位置，并在随机放置后开始为它们设置动画以返回其起始位置。我还缓存了任何重复的 DOM 引用以加快代码执行速度（很可能不明显，但这是一个好习惯）

演示- 随机放置的盒子，然后动画回到它们的正确位置。

我已经分离了这两个动作，使用原始代码将框放置在随机位置，但现在还使用jQuery 的数据将原始位置存储在关联数据中，然后用于将它们动画化回其正确位置。

您现在可以通过调用任一方法按需随机化和重新设置框：

$(document).ready(function() {
    var h = $(window).height();
    var w = $(window).width();
    var $allBoxes = $('#intro .box');

    placeBoxesRandomly($allBoxes, h, w);
    
    placeBoxesToDataStorePositions($allBoxes);
});​

placeBoxesRandomly除了现在还将原始起始位置数据与元素相关联之外，它仍然执行它之前所做的操作：

function placeBoxesRandomly($boxes, h, w) {
    $boxes.each(function() {
        var $box = $(this);
        var position = $box.position();

        tLeft = w - Math.floor(Math.random() * 900), tTop = h - Math.floor(Math.random() * 900);
        $box.css({
            "left": tLeft,
            "top": tTop
        });
        $box.data("start-position-left", position.left);
        $box.data("start-position-top", position.top);
    });
}

placeBoxesToDataStorePositions将框放置到存储在关联数据中的位置。

function placeBoxesToDataStorePositions($boxes) {
    $boxes.each(function() {
        var $box = $(this);
        $box.animate({
            "left": $box.data("start-position-left"),
            "top": $box.data("start-position-top")
        }, 3000);
    });
}
于 2012-12-22T13:32:31.203 回答
0

我认为您正在寻找jQuery Isotope 插件。这个Stack-exchange 页面是用它的变体实现的

于 2012-12-22T13:16:50.467 回答