javascript - 在javascript中更改mousemove上的图片

Question

我遇到了这个网站，并想在鼠标移动到我自己的网站时实现类似于他们的图片更改徽标的东西。我不确定它是否使用 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');
}