javascript - 响应光标移动的背景精灵

Question

我正在尝试创建一种效果，该效果根据鼠标光标移动的方向在某个方向上移动图像精灵。我研究了视差滚动，但找不到太多帮助。关于在哪里可以找到有关光标移动相关对象的更多信息或教程的任何想法？

为了更好地了解我在说什么，请访问http://web-features.net/并创建一个响应鼠标移动的新层。

谢谢

Answer 1

谷歌是你的朋友。这是我能找到的唯一针对您的问题的教程，但我相信还有更多关于在 javascript 中使用鼠标位置进行操作的教程。

Answer 2

我不知道任何教程，但请查看这篇文章的答案：

根据单独元素中的光标位置旋转元素

这会让你开始。您可以更改背景位置，而不是旋转元素。

基本上，您想想象一个直角三角形，其中斜边的一端是元素的中心，另一端是光标。

使用 javascripts Math.atan2() 您可以传入 y,x 位置，它以弧度返回角度。

这些信息足以让你继续前进吗？

///////// 更新 /////////

这是我为您制作的演示，也使用 css3 转换：http ://codepen.io/jeffpowersd/pen/ryBJz

Answer 3

这对我有帮助！

http://www.w3schools.com/css/css_image_sprites.asp

希望这可以帮助！

另请注意，在图像精灵上向右移动时，css 方向为负。例如，

#prev{background:url('img_navsprites_hover.gif') -47px 0;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

悬停时，图像向右移动 47 像素，向下移动 45 像素。