Заполнение пространства между двумя объектами динамически - PullRequest
Новая
       13

Заполнение пространства между двумя объектами динамически

0 голосов
/ 10 февраля 2019

Каков наилучший способ заполнить пространство между этими двумя объектами, по сути сделать один объект, который заполняет пространство от самого левого a до самого правого из b.Мне нужно динамическое решение, так как положение A и B будет меняться, иногда B будет дальше слева, чем A. Хотя я бы хотел, чтобы они начинались как два отдельных объекта.Также обратите внимание только на то, что пространство между двумя я хочу заполнить, ничего снаружи. 

function myFunction() {
  var x = document.getElementById('a');
  var y = document.getElementById('b');

  x.style.right = "70%";
  y.style.right = "50%";

  var greenRect = x.getBoundingClientRect();
  var blueRect = y.getBoundingClientRect();

}
h1 {
  position: relative;
  width: auto;
  height: 50px;
  background-color: beige;
}

h2 {
  position: relative;
}

#a {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  margin-left: -50px;
  transform-origin: left;
  border-radius: 50%;
}

#b {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  border-radius: 50%;
}
<h1>
  <div id='a'></div>
  <div id='b'></div>
</h1>


<h2>


  <button onclick='myFunction()'>PRESS</button>


</h2>

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

Вы можете использовать некоторый фон и трюк с тенью, чтобы визуально заполнить пространство между: 

var x = document.getElementById('a');
  var y = document.getElementById('b');

function myFunction() {

  var r = Math.random()*100;
  y.style.right=r+"%";
  x.style.right=(Math.random()*(100 - r) + r)+"%";

}
h1 {
  overflow:auto;
  background-color: blue;
  color:#fff;
  text-align:center;
}

#a {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  margin-left: -50px;
  transform-origin: left;
  border-radius: 50%;
  box-shadow:-50vw 0 0 50vw beige;
}

#b {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: green;
  float: right;
  border-radius: 50%;
  box-shadow:50vw 0 0 50vw beige;
}
<h1>
  <div id='a'>1</div>
  <div id='b'>2</div>
</h1>


<h2>


  <button onclick='myFunction()'>PRESS</button>


</h2>
0 голосов
/ 10 февраля 2019 

    
function myFunction() {
    var x = document.getElementById('a');
    var y = document.getElementById('b');

    
    x.style.right = "70%";
    y.style.right = "50%";
    
    var greenRect = x.getBoundingClientRect();
    var blueRect = y.getBoundingClientRect();
    
    y.style.width = (blueRect.left - greenRect.left) + "px";
 
}
    
        
        h1 {
            position: relative;
            width: auto;
            height: 50px;
            background-color: beige;
        }
        
        
        h2 {
            position: relative;
        }
        
        
        #a {
            position:relative;
            width: 50px;
            height: 50px;
            background-color: green;
            float: right;
            margin-left: -50px;
            transform-origin: left;
        }
       
        #b {
            position:relative;
            min-width: 50px;
            height: 50px;
            background-color: green;
            float: right;
        }
        
    
    
<h1>
    <div id = 'a'></div>
    <div id = 'b'></div>
</h1>
    
    
<h2>
    
    
    <button onclick = 'myFunction()'>PRESS</button>
    
    
    </h2>
...