Question

我在HTML中的内容是1个主框和1个内部框，位置绝对。内盒有更多的小盒子。我想要实现的是，当我点击一个方框时，整个内盒移动并使盒子位于窗口的中心。

例如，查看我附加的图像。第一张图片是正常状态。第二个图像是，在点击第一个框后，移动内框并使第一个框位于屏幕的中心。如果我点击第二个框，它应该将白色框移动到一个位置，因此第二个框显示在中心。第3个框，第4个框等相同。

我不知道该怎么做。但我的片段可能会帮助你告诉我该怎么做。

$('.box').click(function(){
  var top = $(this).position().top;
  var left = $(this).position().left;
  $('#inner-box').css({
    'margin-left' : left,
    'margin-top' : top
  });
});

.main-box{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:gray;
  overflow:hidden;
}

  .inner-box{
    position:absolute;
    top: 15px;
    left:15px;
    width:calc(100% - 30px);
    height: calc(100% - 30px);
    background-color: white;
    font-size:0;
  }

  .box{
    display:inline-block;
    border:1px solid red;
    background-color: black;
    height: 20%;
    width: 22%;
    margin:1.1%;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-box" id="main-box">
  <div class="inner-box" id="inner-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 1

您可以使用calc的CSS跟踪来获取文档with和height除以2，以将框移动到屏幕的中心。只需在#inner-box元素上切换一个类。

这是一种方法。

$('.box').click(function() {
  $('#inner-box').toggleClass('center');
});

body {
  margin: 0;
}

.main-box{
  position:relative;
  height: 100vh;
  background-color:gray;
  overflow:hidden;
}

.inner-box{
  position:absolute;
  top: 15px;
  left:15px;
  width:calc(100% - 30px);
  height: calc(100% - 30px);
  background-color: white;
  font-size:0;
  -webkit-transition: top 0.3s linear, left 0.3s linear;
  -moz-transition: top 0.3s linear, left 0.3s linear;
  -ms-transition: top 0.3s linear, left 0.3s linear;
  -o-transition: top 0.3s linear, left 0.3s linear;
  transition: top 0.3s linear, left 0.3s linear;
}

#inner-box.center {
  top: calc(100vh / 2);
  left: calc(100vw / 2);
}

.box{
  display:inline-block;
  border:1px solid red;
  background-color: black;
  height: 20%;
  width: 22%;
  margin:1.1%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-box" id="main-box">
  <div class="inner-box" id="inner-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 2

使用top:50%; left:50%;在jquery中切换新类，并按相对于父级的框位置计算边距值

var pat=$('#inner-box').offset().top,pal=$('#inner-box').offset().left;
$('.box').click(function() {
    var top = pat+$(this).position().top+$(this).height()/2;
    var left = pal+$(this).position().left+$(this).width()/2;
    //alert(top +","+left);
    $('#inner-box').css({
      'margin-left' : -1*left,
      'margin-top' : -1*top
    });
  if(!$('#inner-box').hasClass('newposit'))
    $('#inner-box').addClass('newposit');
});

.main-box{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:gray;
overflow:hidden;
  }

  .inner-box{
position:absolute;
top: 15px;
left:15px;
width:calc(100% - 30px);
height: calc(100% - 30px);
background-color: white;
font-size:0;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  }

  .box{
display:inline-block;
border:1px solid red;
background-color: black;
height: 20%;
width: 22%;
margin:1.1%;
  }
  .newposit {
top: calc(50%);
left: calc(50%);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main-box" id="main-box">
  <div class="inner-box" id="inner-box">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answer 3

我找到了解决方案。如果有人在寻找相同的解决方案，这是我的代码 -

$(document).on('click', '.box', function(){
    var centerX = $('#main-box').height() / 2;
    var centerY = $('#main-box').width() / 2;

    var pos_top = $(this).position().top;
    var pos_left = $(this).position().left;

    var box_width = $(this).width() / 2;
    var box_height = $(this).height() / 2;

    var top = (-1) * (pos_top - centerX + box_height);
    var left = (-1) * (pos_left - centerY + box_width);


    $('#inner-box').css({
        'margin-left' : left,
        'margin-top' : top
    })
});

Answer 4

您必须找到点击的小方框的索引：

var bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))

您可以在此索引中找到其父级中小方框的位置。并且您可以计算值以将此框置于中心。

单击窗口移动元素中心

4 个答案: