Javascript 将示例jQuery函数转换为vanilla JS：Element.offsetTop存在明显问题

我甚至不确定我到底在问什么，所以请容忍我

我试着用酷笔复制这个效果

以下是原始jQuery：

   $('.tile')
    // tile mouse actions
     .on('mouseover', function(){
      $(this).children('.photo').css({'transform': 'scale('+ $(this).attr('data- 
   scale') +')'});
    })
    .on('mouseout', function(){
      $(this).children('.photo').css({'transform': 'scale(1)'});
    })
    .on('mousemove', function(e){
    $(this).children('.photo').css({'transform-origin': ((e.pageX - 
    $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - 
    $(this).offset().top) / $(this).height()) * 100 +'%'});
    })

我试图将jQuery本土化（我试图降低复杂性以关注手头的问题，因此我的标记与他/她的标记略有不同，但我不相信相关的方式）

我的版本半途而废。但是在那里的某个地方有一个计算错误，它阻止为

变换原点

CSS的第二个参数设置正确的值

我相信这个问题与jQuery中的

$（this）.offset（）.top

有关。我已将其转换为

元素。offsetTop

，但这可能不正确。我在这里花了1.5个小时试图学习如何成功，但我没有取得任何进展

任何指向正确方向的指示都将不胜感激

jQuery

offset（）.top（）

获取与文档相关的坐标，而js

offsetTop

与父节点相关

您可以尝试一下

元素.getBoundingClientRect（）.top

它将为您提供与视口相关的顶部位置，而不是与文档相关的顶部位置。但这只是一个开始

然后，您可以使用

document.documentElement.scrollTop

获得滚动位置，并将两者相加

---

---

PS:

document.documentElement.scrollTop

在Safari上不起作用。改用

document.body.scrollTop

。

不错！那帮我把事情安排好了。我还需要使用

Element.getBoundingClientRect（）.left

而不是

Element.offsetLeft

。万分感谢！更新的笔在这里：

var tile = document.querySelector('.tile');
var tileWidth = tile.offsetWidth;
var tileHeight = tile.offsetHeight;
var tileTop = tile.offsetTop;
var tileLeft = tile.offsetLeft;

tile.addEventListener('mouseover', function(){
  tile.style.transform = "scale(1.5)";
});

tile.addEventListener('mousemove', function(e){
  tile.style.transformOrigin = ((e.pageX - tileLeft) / tileWidth) * 100 + "%" + ((e.pageY - tileTop) / tileHeight) * 100 + "%";
});

tile.addEventListener('mouseout', function(){
  tile.style.transform = "scale(1)";
});