Question

我什至不确定我要问的是什么，所以请耐心等待。

我正在尝试用this的Krz Szzz酷笔中复制效果

这是原始的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 +'%'});
    })

here's和pty module是我尝试将jQuery本土化的尝试（我试图降低复杂度以关注当前问题，因此我的标记与他/她的标记有些不同，但在相关方面没有区别，我不相信。）

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)";
});

我的版本成功了。但是，那里存在计算错误，无法为transform-origin CSS的第二个参数设置正确的值。

我相信这个问题与jQuery中的$(this).offset().top有关。我已经将其转换为Element.offsetTop，但这可能是不正确的。我花了1.5个小时来尝试在SO上学习成功的方法，但我没有取得任何进展。

任何朝着正确方向的指针将不胜感激。

Answer 1

jQuery offset().top()与文档相关，而js offsetTop与 parentNode 相关。

您可以尝试Element.getBoundingClientRect().top。

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

然后，您可以使用document.documentElement.scrollTop来获得滚动位置，并将它们加起来。

PS：就我而言，document.documentElement.scrollTop在Safari上不起作用。请改用document.body.scrollTop。

将示例jQuery函数转换为香草JS：Element.offsetTop明显带来麻烦

1 个答案: