响应光标移动的背景精灵

时间:2013-02-09 22:51:18

标签: javascript jquery html css

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

为了更好地了解我正在谈论的内容,请转到http://web-features.net/并创建一个响应鼠标移动的新图层。

由于

3 个答案:

答案 0 :(得分:3)

Google is your friend。这是我能找到的唯一一个针对你的问题的教程,但我确信还有很多关于用javascript做鼠标位置的教程。

答案 1 :(得分:0)

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

Rotating an element based on cursor position in a separate element

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

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

使用javascripts Math.atan2()可以传递y,x位置,并以弧度为单位返回角度。

这有足够的信息让你去吗?

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

下面是我使用css3过渡为你做的一个演示:http://codepen.io/jeffpowersd/pen/ryBJz

答案 2 :(得分:-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。