3D鼠标移动对图库的影响

时间:2019-03-24 16:49:46

标签: javascript jquery

我正在尝试像本网站一样复制图片库的效果 http://claiming-needles.net/

也许有人可以帮助我,我尝试了各种解决方案,其中一种写在下面的jquery中。

$(".gallery").on('mousemove', function(e){
   centerX = $(this).width();
   let moveX = centerX - e.offsetX;
   $(this).css({'transform':'perspective(500px) rotateY('+ moveX/100+ 'deg)'})
})

2 个答案:

答案 0 :(得分:0)

调查此事时,我做的第一件事是删除jQuery。随时将其更改回去,但是至少对我来说,我更熟悉本机浏览器API。

这是我最后得到的代码:

document.querySelector(".gallery").onmousemove = function(e) {
   centerX = e.target.getBoundingClientRect().width / 2;
   let moveX = centerX - e.offsetX;
   e.target.style.transform = `rotateY(${moveX / 4}deg) perspective(500px)`;
};

如果没有正在使用的完整DOM,很难确定出什么问题了。但是,在玩游戏时,我确实注意到了两件事可能会解释您的麻烦:

  • 在转换后的元素之外,不会调用onmousemove事件。这意味着随着时间的推移,移动鼠标的效果会减小。
  • 您没有将中心坐标除以2。这意味着您将从右侧获得偏移量。
  • 除非这个元素很大,否则100的比例因子太大了。

至少,我认为您应该考虑使用某种容器元素来跟踪鼠标及其偏移量。

希望所有这些对您有所帮助。让我知道是否可以解决!

答案 1 :(得分:0)

就像@Oliver Dunk一样,如果没有DOM,很难说出什么错误。我认为可以解决。看起来只有在Perspective属性位于元素的母体上时,效果才起作用。这看起来可行:

$("img").on('mousemove', function(e){
   centerX = $(this).width();
   centerY = $(this).height();
   
   moveX = centerX - e.offsetX;
   moveY = centerY - e.offsetY;
   
   $("#output").text(moveX)
   $(this).css({'transform':'rotateY('+ moveX/100+ 'deg) rotateX('+ moveY/10+ 'deg)'})
   
})
div { perspective: 100px; padding: 100px;}

img {border: 1px solid orange}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="data:image/png;base64,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">

</div>

相关问题