0
我试图创建一个效果，它根据鼠标光标移动的方向在特定方向上移动图像精灵。我研究过视差滚动，但找不到太多帮助。关于在哪里可以找到关于光标移动的对象的更多信息或教程的任何想法？响应光标移动的背景精灵
想要了解我正在谈论的内容，请转到http://web-features.net/并创建一个响应鼠标移动的新图层。
谢谢
A
回答
3
Google is your friend。这是我能找到的针对你的问题的唯一教程，但我相信还有更多关于在javascript中使用鼠标位置来做事情的教程。
-1
这帮了我！
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;}
在悬停时，图像向右移动47px，向下移动45px。
+0
另请注意，在图像精灵上右移时，CSS方向为负。例如，#prev {left：63px; width：43px;} #prev {background：url（'img_navsprites.gif'）-47px 0;}。 – 2013-02-09 22:57:29
+0
该页面解释了css精灵的工作方式，我相信海报问的是如何根据鼠标方向动态更改精灵位置。 – Flauwekeul 2013-02-09 22:59:36
+0
对不起！ – 2013-02-09 23:01:17
0
我不知道任何教程，但检查出这个问题的答案后：
Rotating an element based on cursor position in a separate element
这将让你开始。您可以改变背景位置，而不是旋转元素。
基本上你想象的是一个直角三角形，其中斜边的一端是元素的中心，另一端是你的光标。
使用javascripts Math.atan2（），您可以传入y，x位置，并以弧度返回角度。
这是足够的信息，让你走？
/////////更新/////////
继承人演示中，我对你也使用CSS3过渡作出：http://codepen.io/jeffpowersd/pen/ryBJz
谢谢，我将在该教程中进行深入探讨。 – Brian 2013-02-09 23:31:31