javascript - 使用 mootools 悬停时文本叠加

Question

我想在 a>img 上添加动画文本叠加层，并具有一些简单的效果，例如淡入淡出或动画输入/输出。

有谁知道有一个插件已经可以做到这一点，或者可以建议我应该查看的 mootools 功能吗？

Answer 1

您需要将以下伪代码转换为 Mootools:-

1. 编写一个函数来创建新的 <div>给定元素内的元素，使用 new Element()功能。 <div>的内容除了父元素之外，还将在函数参数中传递。
2. 添加mouseenter事件至<a>您想要处理的标签会触发上述函数并将其自身作为父元素传递。您可以设置父级 <a> 的 rel 属性标记为子项的内容 <div>使这个插件真正具有动态性。
3. 创建 slideOut()该函数接受一个元素，查找父元素的尺寸并执行滑动动画以将元素移动到父元素边界之外。确保您有overflow:hidden;在父元素 CSS 上设置。
4. 将鼠标悬停事件添加到 <a>运行 slideOut() 的标签函数并传递子项 <div>正如它的论点。

应该可以了。