Что делает следующее выражение в функции эффекта пульсации?

Question

var top = e.pageY - rect.top - ripple.offsetHeight/2 - document.body.scrollTop;

Может ли кто-нибудь объяснить, что делает каждая часть вышеуказанного заявления?

«e.target» - это объект, который запускает событие и рябь - это диапазон, содержащий класс пульсаций, поэтому, если это сама волна. Таким образом, он находит свое положение относительно верхней части страницы, почему он одновременно ссылается на рябь и рябь?

Вот лучший контекст функции:

if(!ripple){ 
    ripple=document.createElment('span'); /*empty object, span to hold the ripple class*/ 
    ripple.className='ripple';/*add ripple class to it (span)*/ 

    /*place the ripple on top of the button*/ 
    ripple.style.height=ripple.style.width= 
    Math.max(rect.width, rect.height)+'px'; 
    /*set the ripple to the buttons child= attach*/ 
    target.appendChild(ripple); 
} 

/*--------- DONT ANIMATE FOR NOW --------------*/ 
ripple.classList.remove('show'); 

/* complex part*/ 
var top= e.pageY - rect.top - ripple.offsetHeight/2 - document.body.scrollTop; /*DEBUG HERE*/ 
var left =e.pageX - rect.left - ripple.offsetWidth/2 - document.body.scrollLeft;       
ripple.style.top= top + 'px'; 
ripple.style.left= left + 'px'; 

Answer 1

Прежде всего, я не так хорошо объяснить, но я постараюсь упростить его, как я мог.

Дисплей span теги встроены, поэтому он не займет ширину и высоту. вместо этого установите его в display block или дайте ему padding.

Во-вторых, чтобы сделать элемент занять его позицию с точки мыши вы должны получить это вещи:

• Установите пульсации в absolute положении
• Получить:
  • event.pageX/event.pageY
  • Контейнер offsetLeft/offsetTop
  • Пульсация clientWidth/clientHeight и разделить его с 2 до центра его с указателем

var cont = document.querySelector('.cont'); 
 

 
var ripple = document.createElement('span'); 
 
ripple.setAttribute('class', 'ripple'); 
 
ripple.style.width = '40px'; 
 
ripple.style.height = '30px'; 
 
ripple.style.display = 'block'; 
 
ripple.style.position = 'absolute'; 
 
ripple.style.backgroundColor = '#2ecc71'; 
 

 
cont.addEventListener('click', function(e) { 
 
    var posX = e.pageX - cont.offsetLeft - (ripple.clientWidth/2); 
 
    var posY = e.pageY - cont.offsetTop - (ripple.clientHeight/2); 
 
    ripple.style.left = posX + 'px'; 
 
    ripple.style.top = posY + 'px'; 
 
    cont.appendChild(ripple); 
 
});

.cont { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #3498db; 
 
    position: relative 
 
}

<div class="cont"> 
 

 
</div>

https://jsfiddle.net/jfzjk24r

Jquery Expample:http://codepen.io/El-Oz/pen/reQpae

Answer 2

OK Я думаю, что я выясняю ответ, когда мы, кодеры, не понимаем, что делает часть кода, нехорошо видеть, что это воспринимается как должное и использовать его по своему усмотрению, мы должны знать, что каждая строка делает. Благодаря El.oz и еще нескольким исследованиям, я думаю, это сделано. Итак ... Вот оно, как предполагается работать:

---

Когда мы кликаем в любом месте страницы pageX/Y дает нам абсолютную позицию, то есть положение по отношению к документу, но если мы хотите повлиять на конкретный объект в документе, мы должны преобразовать эти координаты в локальное пространство, другими словами, позицию относительно объекта, на который мы нажали, которая определяется областью прямоугольника, которая охватывает каждый объект и, наконец, не менее, как мы хотим, чтобы сидеть в промежутке, где бы мы ни находились, имеет смысл использовать его центр как точку регистрации, а не использовать верхний правый угол.

---

данных нам нужно:

---

• Получает глобальную позицию: event.pageX/event.pageY
• Получить позицию объекта мы щелкнули => Контейнер offsetLeft/offsetTop
• Измените точку регистрации объекта, который мы хотим разместить, от верхнего правого угла до центра, что в нашем случае является пульсацией => пульсация clientWidth/2 clientHeight/2 =>

---

• Математик участвует: Вычтут любое смещение от глобальных координат в нашем случае Вынимают офсетный контейнер и любое смещение, вызванные страницы свитка в обеих осях и, наконец, отцентрировать span в позиции щелчка. И вот он, пролет содержит классовую часть, которая выполняет анимацию пульсации.

---

var top= e.pageY - rect.top - ripple.offsetHeight/2 - document.body.scrollTop; /*subtract the container and scroll offset from global then center, this gives the local coordinate*/ 
var left =e.pageX - rect.left - ripple.offsetWidth/2 - document.body.scrollLeft;       
ripple.style.top= top + 'px'; /*place the ripple on this local coords*/ 
ripple.style.left= left + 'px';