在javascript中更改mousemove上的图片

Question

我遇到了this网站，并希望在鼠标移动到我自己的网站时实现类似于图片更改徽标的内容。我不确定它是否使用jQuery，因为页面源有点令人困惑，我还是在javascript中做这个吗？

Answer 1

实际上，该网站正在使用背景精灵，并显示每个徽标更改精灵的位置。

这是徽标的精灵图片： http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png

你应该根据精灵布局以及你想要如何“快速”改变图像来做一些数学运算。

看到这个， http://docs.jquery.com/Tutorials:Mouse_Position

然后更改元素的背景位置。

Answer 2

如果您有div或其他块元素而不是图像标记，也可以使用css完成相同的效果。

#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}

#logo:hover {
background: url('logo_hover.png');
}