用mootools悬停时叠加文字

Question

我想在a>img上添加一个动画文字叠加层，其中包含一些简单的效果，例如淡入淡出或动画输入/输出。

有没有人知道已经执行此操作的插件，或者可以建议我应该查看的mootools功能？

Answer 1

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

1. 使用<div>函数编写一个在给定元素内创建新new Element()元素的函数。除了父元素之外，<div>的内容将在函数参数中传递。
2. 将mouseenter事件添加到您要处理的<a>标记中，该标记会触发上述函数并将自身作为父元素传递。您可以将父<a>标记的rel属性设置为子<div>的内容，以使此插件真正动态。
3. 创建一个slideOut()函数，该函数接受一个元素，查找父元素的尺寸并执行幻灯片动画以将元素移动到父元素边界之外。确保在父元素CSS上设置overflow:hidden;。
4. 将鼠标输出事件添加到运行<a>函数的slideOut()标记中，并将子<div>作为参数传递。

应该这样做。