根据菜单悬停鼠标位置旋转图像 - WordPress

时间:2016-12-09 09:42:12

标签: html css wordpress rotation image-rotation

好的,所以这可能有像this one这样的平行问题,但我仍然没有达到我的目标。

编辑:由于这个问题引起了消极性,我需要指出,我正在就如何完成这一问题提出指导。我已经google了一下,发现了类似场景的jQuery解决方案 - 包括我上面给出的链接。我并不愚蠢,我只是真正地向科技界寻求指导和帮助。所以,那说......这就是情况:

我想制作一个箭头旋转的png图像以指向wordpress网站中菜单的标签 - 所以如果将鼠标悬停在菜单链接上,图像也指向它,但是当你离开鼠标时,图像恢复正常方向。

我不希望它一直完全跟随鼠标,就在鼠标悬停在菜单项上时。

有人能指导我做最简单的方法吗?

1 个答案:

答案 0 :(得分:1)

我相信这可以通过“响应式”布局来完成,即可以在不同屏幕分辨率/尺寸上工作的布局。

可以确定屏幕上元素的位置,并在此处进行说明:Retrieve the position (X,Y) of an HTML element

由于我们能够确定菜单项的位置和大小,我们可以确定三角形的两边;从箭头到菜单项。然后使用毕达哥拉斯定理,你可以计算斜边的长度。然后使用正弦,余弦和/或切线的属性,您可以计算三角形的角度并适当地旋转箭头。

这就是你编写代码的方法。我可以在将来的某个时候写它。