javascript - 按元素位置显示大 div 的一小部分

标签 javascript jquery html css position

我正在尝试创建一张 map ，其大小为 576 x 576。

它是由 32 x 32 的图 block 创建的。所以我想要的是在这张 map 中找到我的 Angular 色 div 并给我一个 View 。就像无论我的 Angular 色位置在哪里，总是只显示 150 x 150 的 View 。就像游戏移动改变视线。我的 Angular 色总是保持在中心位置，并在他周围以 150 x 150 的视角查看整个 576 x 576 的大格。 

.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture {
    position: relative;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

.char {
    position: absolute;
    z-index: 5;
    top: 0;
}
<div class="row">

<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>

</div>

<div class="row">

<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs">   <div class="char"><img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero"></div></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>

</div>

<div class="row">

<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>

</div>

<div class="row">

<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
<div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>

</div>

这是一个jsfiddle with a full-sized map .

最佳答案

只需使用几个 div 并操纵中央的边距。

$("#up").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset+=16;
  $("#map").css("margin-top", offset + "px");
});

$("#down").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-top"));
  offset-=16;
  $("#map").css("margin-top", offset + "px");
});

$("#left").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset+=16;
  $("#map").css("margin-left", offset + "px");
});

$("#right").on("click", function(e)
{
  var offset = parseInt($("#map").css("margin-left"));
  offset-=16;
  $("#map").css("margin-left", offset + "px");
});
.row {
    justify-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.texture img {
    width: 100%;
    height: auto;
    display: block;
}

.texture:hover {
    position: relative;
    filter: grayscale(1);
}

button
{
  font-size: 20pt;width: 50px;height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right">
<table>
    <tr><td></td><td><button id="up">&uarr;</button><br /></td><td></td></tr>
    <tr><td><button id="left">&larr;</button><br /></td><td></td><td><button id="right">&rarr;</button><br /></td></tr>
    <tr><td></td><td><button id="down">&darr;</button><br /></td><td></td></tr>
</table>
</div>

<div id="viewport" style="width:300px;height:300px;overflow:hidden;position:relative;">
<img src="https://i.ibb.co/8PZ6Dp9/hero-down.png" alt="hero" style="position:absolute;left:140px;top:140px;">
<div id="map" style="width:590px; height:433px;">

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>
<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/ZVsfZgZ/untitled3.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

<div class="row">
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/4.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/1.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
  <div class="texture"><img src="https://i.ibb.co/rpVFs8x/0.png" alt="bbs"></div>
</div>

</div>
</div>

关于javascript - 按元素位置显示大 div 的一小部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57633285/

上一篇：javascript - 根据当前旋转顺时针或逆时针旋转 div

下一篇：javascript - 检测圆重叠

相关文章：

javascript - Javascript 文件大小会影响浏览器的解析时间吗？两个 5kb JS 文件的解析速度是否会比单个 10kb 文件的解析速度更快，反之亦然？

javascript - 无法设置 disabled=false (javascript)

javascript - Word 文档的 pdf.js 模拟

html - 替换 <center>

javascript - 是否可以在普通 Javascript 中同时运行多个 if 语句？如果是这样你怎么办？

javascript - 嵌套函数的回调

jQuery:如何使用 fadeToggle()？

javascript - W3C DOM4 规范第 5.2.2 节中的 jQuery 说明

javascript - iframe 中的 Jplayer 控件

javascript - 如何从下拉列表中获取所选文本的第一个字符并将其放入文本框中？

©2024 IT工具网  联系我们