jquery - 响应式方形图像重复以平均填充窗口空间-6ren

jquery - 响应式方形图像重复以平均填充窗口空间

转载作者：行者123 更新时间：2023-11-28 12:59:29

25

4

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

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

这是我的索引:

    <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/

我似乎想不出办法让方 block 均匀地填满窗口空间。

最佳答案

更改后它确实有效:

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

关于jquery - 响应式方形图像重复以平均填充窗口空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16263279/

25

4

0

文章推荐： ios - UICollectionViewCell 上的奇怪边框 - Swift

文章推荐： javascript - Jquery each loop + setTimeout 增量问题

文章推荐： python - 谷歌应用引擎 : Inject page-dependent CSS

文章推荐： html - PHP 文件中的背景图像未显示

MySQL查询总和结果除以行数(平均)
我在 MySQL 中有以下数据，我想求和(总计)然后除以行数。例子: 我想对 AcctSessionTime 列中的所有数字求和并将其除以项目数，所以在我们的例子中 6+4+3+31=44 将它们除
SQL 平均(计数(*))？
我试图找出一个值在列中出现的平均次数，根据另一列对其进行分组，然后对其进行计算。我有 3 张 table ，有点像这样 DVD ID | NAME 1 | 1 2 | 1 3
C 编程 - 平均
好吧，我完全被困在这里，如果这给你们带来任何不便，我深表歉意，但我需要你们的帮助。我目前正在自学 C，并且从昨天开始慢慢地达到目标。所以我想给自己一个任务，让用户输入 3 个数字，程序必须找到这三个
java - 数组 - 平均
我在使用 subAverage 类时遇到困难。当我使用 main 方法时，它似乎无法正常运行。基本上，subAverage 对数组中包含开始索引和结束索引的项进行平均。但是，当我运行它时，我得到了 3
Python numpy 平均
像这样平均一个表不是问题 table = [[1,2,3,0],[1,2,3,0],[1,2,3,4]] 你可以 print numpy.average(table,axis=0) 但是如果我有不均匀
JavaScript 平均 while 循环
问题 -开发一个类平均脚本，每次运行时都会处理任意数量的结果。提示用户输入每个结果，直到他/她输入 -1。 (哨兵)确定类(class)平均值并将其写入页面。如果未输入结果(第一个输入为 -1)，则显
javascript - 对两个数组的值进行分组(平均)
我有 2 个包含以下数据的数组: Array1 = [A, A, A, A, B, B, B, C, C, C, C, C]; Array2 = [4, 2, 4, 6, 3, 9, 6, 5,
Python:从文本文件导入列表并根据多列进行排序/平均
我有一个如下所示的文本文件: Mike 5 7 9 Terry 3 7 4 Ste 8 2 3 我写了下面的程序从文本文件中检索数据将文本分成由空格分隔的列将每个名字后面的分数按顺序排序(最低在
python - 平均-Python
我试图找到范围内数字的平均值(即找到 1-1000 范围内所有数字的平均值)。我编写了以下代码来执行此操作，但由于 if 语句，在运行时，代码会生成多个数字。然后我尝试使用 while-loop 代替
Python最长/平均 'losing'以字符串中的二进制数字序列运行
我有一系列事件。 1 是好的，0 是坏的。寻找寻找 1 个序列的最大、最小和平均长度的最 Pythonic 方式。例如: seq ="00100000000000110100100000000011
C# Linq 平均
我有一个包含类似于以下数据的表格: Group TimePoint Value 1 0 1 1 0 2
python - 对对象列表的属性求和/平均
假设我有一个类 C，它具有属性 a。从 Python 中的 C 列表中获取 a 总和的最佳方法是什么？我已经尝试了以下代码，但我知道这不是正确的做法: for c in c_list: t
r - 合并(平均)具有部分匹配标题名称的列
我有一个看起来像的数据: AAA_1 AAA_2 AAA_3 BBB_1 BBB_2 BBB_3 CCC 1 1 1 1 2 2
qt - 平均 QRgb 值
对于分色算法，我需要对 std::vector 中的颜色值 (QRgb) 进行平均。您建议如何做？分别对 3 个分量求和然后取平均值？不然呢？最佳答案自 QRgb只是一个 ARGB 格式的 32
mean - 关于(平均)平均精度的困惑
在this问题中，我要求对精度调用曲线进行澄清。特别是，我问我们是否必须考虑一定数量的排名才能画出曲线，还是我们可以合理地选择自己。根据answer，第二个是正确的。但是，现在我对平均精度(AP)
networking - 平均 UDP 数据包丢失和数据包重新排序
我想在 UDP 数据包丢失(或丢失)问题上获得其他 SO'ers 的经验。最初我的理解是，给定直接点对点连接，其中网卡通过交叉电缆连接，网卡上有充足的缓冲区并及时处理所述缓冲区，“应该”没有数据包丢
r - 统计效率低下( block 平均)
我有一系列数据，这些数据是通过分子动力学模拟获得的，因此在时间上是连续的，并且在某种程度上是相关的。我可以将平均值计算为数据的平均值，我想估计与以这种方式计算的平均值相关的误差。根据 this bo
excel - 平均 If 函数 - 排除零？
我正在使用以下averageIf公式 =AVERAGEIF('Backend Data - Aerospace'!D:D, "Total",'Backend Data - Aerospace'!E:E
sql - 平均 sal 然后按降序排序
我想列出所有收入超过平均工资的员工。我对此有点迷茫。我需要将所有薪水加起来然后取平均，只显示收入高于平均水平的薪水。在这方面我需要很多帮助。我的查询不起作用 SQL> select empno,
audio - 平均 voip 压缩率？
我正在运行一些音频压缩测试并尝试 Skype's Silk .在他们的测试应用程序中，我看到压缩率为 94%。这似乎很高，这是 Silk 的典型比率吗？这与其他音频压缩编解码器有可比性吗？最佳答案

首页

博学

6Ren·AI

商城

jquery - 响应式方形图像重复以平均填充窗口空间