0

我会尽量说清楚。我的目标是用固定数量的正方形填充窗口空间，这些正方形也可以响应窗口大小的变化。然后这些方块将随机消失，直到只有它们中的一棵树作为按钮保留在中间。

我找到了一段用于照片库的代码，并试图根据我的目的对其进行调整，但我被困在了响应式部分。

这是我的索引：

    <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> SPLIT</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
    <script src ="jquery.sliced.js"></script>

   <link rel="stylesheet" href="jquery.sliced.css"/>


</head>
<body>

<div class="square"></div>

    <div id ="wrapper">
    <div id="back"></div>
    </div>
</body>


</html>

这是我的CSS：

html, body {
    width:100%;
}

#wrapper {
    width:100%;
    height:100%;
    margin-left:-5px;
    padding-top:-10px;
    position:fixed;
    overflow:hidden;
}


.tile { 
    float:left;
    background-color:red;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    -o-transition: all .1s linear;
}


.tile:hover { 
    opacity:0; 
}

还有我的 JS：

$(window).load(function(){
;(function( $, window ) {

var _defaults = {
    x : 20, // number of tiles in x axis
    y :20, // number of tiles in y axis
    gap:2,
    random : true, // animate tiles in random order
    speed : 2000 // time to clear all tiles
};

  $.fn.splitInTiles = function( options ) {

    var o = $.extend( {}, _defaults, options );

    return this.each(function() {

      var $container = $('#wrapper');
         var width = $container.width(),
          height = $container.height(),
          $back = $("#back"),
          n_tiles = o.x * o.y,
          tiles = [], $tiles;

      for ( var i = 0; i < n_tiles; i++ ) {
        tiles.push('<div class="tile"/>');
      }

      $tiles = $( tiles.join('') );

      // Hide original image and insert tiles in DOM
      $back.hide().after( $tiles );

      // Set background
      $tiles.css({
        width: width / o.x,
        height: height / o.y,
        marginBottom: o.gap +'px',
        marginRight: o.gap +'px',
      });

      // Adjust position
     $tiles.each(function() {
    var pos = $(this).position();
    $(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
    });


    });

  };

}( jQuery, window ));

$('#back').splitInTiles();
});//]]>

这是带有结果的jsfiddle：

http://jsfiddle.net/Z5WyQ/13/

我似乎无法想办法让方块均匀地填充窗口空间。

4

2 回答 2

0

更改后它确实有效：

$tiles.css({
    width: Math.floor((width / o.x) + o.gap),
    height: Math.floor((height / o.y) + o.gap),
    marginBottom: o.gap + 'px',
    marginRight: o.gap + 'px'
});
于 2013-04-28T13:36:08.790 回答
0

考虑到我最初的问题没有得到答案，我想到了一个不同的想法。我认为如果方块走出窗外并隐藏溢出也可以。这样也许更容易让它们保持方形（考虑到各种窗口大小）。这也奏效了，但不幸的是，这引发了另外两个问题： 1. 如果屏幕太大（23' +），方块似乎突然结束而没有填满整个窗口。2. 根据某些宽度上的屏幕宽度，即使我在父容器上隐藏了溢出，我也会在屏幕左侧留下一个空白区域（列）。

我认为这会简单得多，我仍然认为大师会有一个简单的解决方案，用固定数量的响应方块填充窗口，但我似乎无法弄清楚。

于 2013-05-15T11:38:45.840 回答