2

我一直在看这个 WordPress 主题：http ://themes.thunderbuddies4life.com/?theme=longwave_wp

当磁贴悬停时，似乎半透明的 div 从鼠标进入的边缘滑过磁贴。我认为可以为此使用单个 div，但我不确定通过查看页面源代码是如何实现的。

我非常擅长 html 和 css，但我的 jQuery 非常基础。我知道这有点开放，但对所涉及的技术进行简要说明会有所帮助。

编辑：考虑一下，没有深入研究页面源，这就是我认为该方法可能起作用的方式：

  1. 每个图块都有自己的半透明覆盖子 div，上面有标题等。
  2. 每个覆盖 div 都位于 tile div 之外的某个位置。瓷砖有overflow:hidden
  3. 当鼠标悬停在 div 上时，我使用 jQuery 来计算鼠标进入的哪一侧（如何？）
  4. 然后我将 css 类应用于覆盖 div：top、bottom、left或right。CSS 将立即将覆盖 div 定位在 tile div 的相应边缘之外。
  5. jQuery 然后用动画偏移覆盖 div 以将其移动到图块上方的位置。

瓦片将动态调整大小，因此需要 jQuery 来根据瓦片大小重新定义偏移量。

4

2 回答 2

3

他们正在使用这个 - http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/

我还开始了一个纯 CSS 版本 - http://codepen.io/seanjacob/pen/rmIcD

于 2013-04-17T15:45:35.887 回答
0

第一个想法：在 mouseenter 上，您可以开始进行数学运算以根据鼠标坐标确定进入边缘。然后，当您知道鼠标是从顶部、右侧、底部还是左侧输入时，您可以执行必要的动画

于 2013-04-17T15:43:59.177 回答