是否可以在 MooTools 中以百分比补间元素?
var slide = new Fx.Tween($('slide_box'));
$('next_slide').addEvent('click',function(){
slide.start('left', '-100%');
});
但是这段代码将元素补间了 100 像素,而不是百分比。
也许我忽略了一些明显的东西,但 -100% 不仅仅是“0px”吗?
如果一个元素在相对定位的 DIV 中的绝对左侧位置为 600px,则将该元素向左移动 -100% 将导致位置为 0,0(假设元素顶部为 0)。
因此,您可以通过变形来实现这一目标。
$('slide_box').morph({'left':'0px'});
如果您希望将元素移动 100% 以外的值,则可以使用简单的计算来找出所需的移动量。
var shiftPercentage = 70;
var elementPosition = $('slide_box').getPosition().x;
var resultingShiftAmount = (elementPosition/100)*shiftPercentage;
$('slide_box').morph({'left':resultingShiftAmount+'px'});
当然,根据您想将其转换为正数还是负数,使变量“resultingShiftAmount”为正数或负数。
希望这可以帮助。
进一步编辑,似乎 Tween 类有一个名为“unit”的选项。我想这不会像你期望的那样工作。
var slide = new Fx.Tween($('slide_box'),{unit:'%'});
slide.start('left','-100%');
上面的代码片段将元素'slide_box'相对于其包含元素的位置转换为-100%(至少在我的简短测试中似乎是这种情况)。例如 - 包含元素位于 0px,0px 的位置设置为相对。在这个元素中有一个绝对定位的元素在 500px,0px。正如我所看到的,如果您要在这个绝对定位的元素上使用上面的代码,它将绝对从包含元素的 0,0 开始定位,减去包含元素宽度的 100%。
这对我来说似乎有点令人困惑,但这就是测试所显示的。
祝你好运!