Question

我有四个div，我已经应用了javascript过渡属性来增加按钮点击的宽度和高度，但我需要在同一个屏幕中增加高度和宽度

我想在按钮上单击这些div应保留在此屏幕中。现在当我按下按钮（+）进行跟踪时，它会增加向右移出屏幕的宽度和高度，使宽度和高度增加在左侧，以便它保持在同一个屏幕并与其他div重叠。

function changec() {
   var xDiv = document.getElementById('div1');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec2() {
   var xDiv = document.getElementById('div2');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec3() {
   var xDiv = document.getElementById('div3');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}
function changec4() {
   var xDiv = document.getElementById('div4');

   if (xDiv.style.height == '') 
       xDiv.style.height = '480px'
   else 
       xDiv.style.height = ''

    if (xDiv.style.width == '') 
       xDiv.style.width = '850px'
   else 
       xDiv.style.width = ''
}

.gh{width:96%;height:auto;padding:10px;border:1px solid #aaaaaa;clear: both;margin:10px 10px 10px 10px;overflow:none;
  position: relative;
  display: block;

}

.leftbox{clear: both;
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 0.2s ease;
  z-index: 1000;
  background:white;
  position: absolute;



}
.leftbox2{
  border:2px solid green;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow: none;
  overflow:scroll;
  transition: all 1s ease;
z-index: 1;
  background:white;
  position: absolute;



}
.rightbox{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}
.rightbox2{clear: both;
  border:3px solid red;
  float: left;
  width: 100%;
  height: 280px;
  margin: 5px;
  overflow:scroll;
  transition: all 2s ease;



}

ul{
  list-style-type: none;
}
.go{
min-height:300px;
height: 800px;
width: 100%;
overflow:scroll;

  }
  .btn{
    width: 100%;
  }


<div class="col-md-8 red">
<div class="col-md-6">
 <h4 style="text-align:center">Done</h4>

<section class="leftbox" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" >
 <button id="menu" onclick="changec()" class="pull-right fixed-top">+</button>
   </section>
</div>

<div class="col-md-6">
<h4 style="text-align:center">Tracking</h4>
<section class="rightbox" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
 <button id="menu" onclick="changec2()" class="pull-right fixed-top">+</button>
 </section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Pursuing</h4>

<section class="leftbox2" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec3()" class="pull-right fixed-top">+</button>
</section>
</div>
<div class="col-md-6">
<h4 style="text-align:center">Dropped</h4>

<section class="rightbox2" id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">

   <button id="menu" onclick="changec4()" class="pull-left fixed-top">+</button>
</section>
</div>
</div>

Answer 1

我不确定你想要什么，但这就是我想出来的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="js/animate.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h2>Done</h2>
                </div>
                <div class="col-md-6">
                    <h2>Tracking</h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6">
                    <div class="box first">
                        <button class="left btn btn-default" onclick="change('.first')" type="button">+</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box second">
                        <button class="right btn btn-default" onclick="change('.second')" type="button">+</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h2>Pursuing</h2>
                </div>
                <div class="col-md-6">
                    <h2>Dropped</h2>
                </div>
            </div>
            <div class="row boxes">
                <div class="col-md-6">
                    <div class="box third">
                        <button class="left btn btn-default" onclick="change('.third')" type="button">+</button>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="box fourth">
                        <button class="right btn btn-default" onclick="change('.fourth')" type="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS：

.container {
  height: 1000px;
}

.col-md-6 {
  position: relative;
}

.boxes .col-md-6 {
  max-height: 280px;
  min-height: 280px;
}

.box {
  position: absolute;
  border: 2px solid black;
  width: 100%;
  height: 280px;
  transition: all 0.5s ease-in-out;
}

.right {
  float: right;
}

.first {
  top: 63;
  left: 0;
  z-index: 1;
}

.second {
  top: 63;
  right: 0;
  z-index: 2;
}

.third {
  bottom: 0;
  left: 0;
  z-index: 3;
}

.fourth {
  bottom: 0;
  right: 0;
  z-index: 4;
}

jQuery的：

function change(box) {
    if ($(box).css('height') == '280px') {
        $(box).css({
            'width': '850px',
            'height': '480px'
        });
    } else {
        $(box).css({
            'width': '100%',
            'height': '280px'
        });
    }
}

我将它们全部放在一个函数中，因为良好的编程习惯是针对冗余代码的。你应该试着避免它。

Answer 2

如果您将按钮向右浮动，并且右边缘离开观察区域，那么您可以期望按钮随之移动。

避免这种情况的一种方法：相对于左侧或右侧的位置，然后在jQuery中添加相应的偏移距离，以使您的按钮保持在所需的位置。

不要只使用jQuery来更改窗口。也可以用它将按钮放在需要的位置。

另一种方法是将按钮定位不在浮动右边，而在左边缘定位一个离散量。

如何从左开始css过渡

2 个答案: