функция setInterval для перекрытия элементов при переходе, - PullRequest
Новая
       8

функция setInterval для перекрытия элементов при переходе,

1 голос
/ 14 марта 2019

Я хочу оптимизировать. Синий / зеленый проверяются на перекрытие, используя setInterval, и если они делают голубые, отправленные ниже зеленого, пока они больше не пересекаются. Тем не менее, часто они не пересекаются и вместо этого могут перемещаться дальше или ближе друг к другу, но не совсем перекрывая друг друга. Какие есть способы проверки наложения, когда зелено-синие будут перекрываться, а не когда они и нет, и какими-либо другими способами это может быть проще? Кроме того, мое использование этого метода не использует переменные, которые обратно пропорционально коррелируют, как в этом примере, поэтому такие решения, как (если rand> 50%), не помогут. Спасибо! 

var green = document.getElementById('green');
var blue = document.getElementById('blue');
        
function myFunct1() {
    var array = ['10%','20%','30%','40%','50%','60%','70%','80%']  
    var rand = array[Math.floor(Math.random()*array.length)];
    green.style.left = rand;
    blue.style.right = rand;
    var inter = setInterval(overlay, 50);
    setTimeout(function( ) { clearInterval( inter ); }, 1500);
}

function overlay() {
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(greenRect.right < blueRect.left || greenRect.left > blueRect.right)
            
    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}
#container {
   position: relative;
   width: 90%;
   height: 40px;
   margin: auto;
   border: 1px solid black;
 }

#green {
  position: absolute;
  width: 50px;
  height: 20px;
  left: 10px;
  background-color: green;
  transition: 1500ms;
 }
        
#blue {
  position: absolute;
  width: 50px;
  height:20px;
  right: 10px;
  background-color: blue;
  transition: 1500ms;
}
<div id = 'container'>
    <div id = 'green'></div>
    <div id = 'blue'></div>
</div>
        
<button onclick = 'myFunct1()'>FUNCTION 1</button>

1 Ответ

0 голосов
/ 14 марта 2019

Как насчет добавления некоторого допуска на перекрытие,

Я добавил только один из двух блоков, но, конечно, вы можете разделить перекрытие и применить их к обоим полям 

function overlay() {
    var overlappingTolerance = 10
    var greenRect = green.getBoundingClientRect();
    var blueRect = blue.getBoundingClientRect();
    var overlap = !(
                       ( greenRect.right - overlappingTolerance)  < blueRect.left ||
                       ( greenRect.left - overlappingTolerance) > blueRect.right
                   );

    if (overlap == true) {
        blue.style.top = '20px';  
    }
    else {
        blue.style.top = 'auto';
    }
}
...