Question

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

有人能解释一下上述陈述的每一部分在做什么吗？

'e.target'是触发事件的对象，而ripple是包含ripple类的span，因此，如果它是ripple本身。那么它是找到它相对于页面顶部的位置，为什么它同时引用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';

Answer 1

好吧，我想我找出了答案，当我们编程人员不了解一段代码正在做什么时，将它视为理所当然并将其视为理所当然并不好我们希望，我们必须知道每条线的作用。感谢El.oz和一些更多的研究，我认为已经完成了。所以...这就是应该如何运作：

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

我们需要的数据：

获取全局位置：event.pageX / event.pageY
获取我们点击的对象的位置=＆gt; Container offsetLeft / offsetTop
将我们想要放置的对象的注册点从右上角更改为中心，在我们的示例中是ripple =＆gt; Ripple clientWidth / 2 clientHeight / 2 =＆gt;

涉及的数学：我们减去全局坐标的任何偏移在我们的例子中，我们取出容器的偏移量和两个轴中页面滚动引起的任何偏移量，最后将量程中心放在点击位置。就是这样，跨度包含了执行涟漪动画的classe。

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

Answer 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

以下陈述在涟漪效应函数中做了什么？

2 个答案: