下面的语句在涟漪效应函数中做了什么？答案

【问题标题】：What the following statement is doing in the ripple effect function?下面的语句在涟漪效应函数中做了什么？
【发布时间】：2016-10-27 17:24:02
【问题描述】：

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

谁能解释一下上述语句的每个部分是做什么的？

'e.target' 是触发事件的对象，而涟漪是包含涟漪类的跨度，因此，如果它是涟漪本身。所以它正在寻找它相对于页面顶部的位置，为什么它同时引用rect和ripple？

这是一个更好的函数上下文：

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';

【问题讨论】：

嘿 El.oz，我无法理解的是，我知道它创建了一个跨度，然后附加创建效果的类，按钮监听点击并获取位置包含效果的跨度是通过获取 event.pageY 和页面 X 获得的点击，那么为什么脚本从 'rect.top' 获取 (-) 然后再次从ripple.offsetHeight 获取？

标签： javascript html css effect ripple

【解决方案1】：

好的，我想我知道答案了，我们必须知道每一行是做什么的。感谢 El.oz 和更多的研究，我认为它已经完成了。所以...这是应该如何工作的：

当我们点击页面中的任意位置时 pageX/Y 给了我们绝对位置，也就是相对于文档的位置，但是如果我们想要影响文档中的特定对象，我们必须将这些坐标转换为本地坐标空间，换句话说，相对于我们单击的对象的位置，它由包围每个对象的矩形区域定义，最后但并非最不重要的一点是，当我们希望在我们单击的任何地方坐在一个跨度时，使用它是有意义的中心作为注册点，而不是使用右上角。

我们需要的数据：

获取全局位置：event.pageX / event.pageY
获取我们点击的对象的位置 => 容器 offsetLeft / offsetTop
将我们要放置的对象的注册点从右上角更改为中心，在我们的例子中是ripple => Ripple 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';

【讨论】：

【解决方案2】：

首先，我不太擅长解释，但我会尽量简化。

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 示例： http://codepen.io/El-Oz/pen/reQpae

【讨论】：