[英]text overlay on hover with mootools
I'd like to add an animated text overlay on an a>img
with some simple effect like fade or animate in/out. 我想在a>img
上添加动画文本叠加层,并带有一些简单的效果,例如淡入淡出或设置动画效果。
Does anyone know of a plugin that already does this, or can suggest the mootools functions I should be looking at? 有谁知道已经执行此操作的插件,或者可以建议我应该查看的mootools函数?
You'll need to translate the following pseudocode into Mootools: - 您需要将以下伪代码转换为Mootools:-
<div>
element inside a given element, using the new Element()
function. 编写一个函数,使用new Element()
函数在给定元素内创建一个新的<div>
元素。 The content of the <div>
will be passed through in the function arguments in addition to the parent element. <div>
的内容将在父元素之外的函数参数中传递。 mouseenter
event to the <a>
tag you want to work on which triggers the above function and passes itself as the parent element. 将mouseenter
事件添加到要处理的<a>
标记中,该事件将触发上述功能并将其自身作为父元素传递。 You could set the rel attribute of the parent <a>
tag to be the content of the child <div>
to make this plugin really dynamic. 您可以将父<a>
标记的rel属性设置为子<div>
的内容,以使此插件真正具有动态性。 slideOut()
function which takes an element, finds the dimensions of the parent element and carries out a slide animation to move the element outside the parent elements bounds. 创建一个slideOut()
函数,该函数接受一个元素,查找父元素的尺寸,并执行幻灯片动画以将该元素移出父元素边界。 Make sure you have overflow:hidden;
确保您有overflow:hidden;
set on the parent elements CSS. 在父元素CSS上设置。 <a>
tag which runs the slideOut()
function and passes the child <div>
as it's argument. 将slideOut()
事件添加到<a>
标记中,该标记运行slideOut()
函数并传递子<div>
作为其参数。 That should do it. 那应该做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.