Question

是否可以在MooTools中以百分比形式补充元素？

var slide = new Fx.Tween($('slide_box'));
$('next_slide').addEvent('click',function(){
    slide.start('left', '-100%');
});

但是这个代码补充了100px的元素，而不是百分比。

Answer 1

查看基础Fx类，可以选择设置单位。您的示例可以重写为：

$('next_slide').addEvent('click', function(){
    new Fx.Tween('slide_box', {
        unit: '%'
    }).start('left', -100);
});

您可以在行动here中看到它。

Answer 2

也许我忽略了一些明显的东西，但是-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'});

当然，根据您是想要将其转换为正数还是负数，请将变量'resulShiftAmount'设为正数或负数。

希望这有帮助。

进一步编辑，似乎Tween类有一个名为'unit'的选项。我想这不会像你期望的那样工作。

var slide = new Fx.Tween($('slide_box'),{unit:'%'});
slide.start('left','-100%');

上面的代码片段将元素'slide_box'相对于其包含元素转换为-100％的位置（至少在我的简短测试中，这似乎是这种情况）。例如 - 包含元素位于0px，0px将其位置设置为relative。在这个元素中，有一个绝对定位的元素，500px，0px。正如我所看到的，如果你在这个绝对定位的元素上使用上面的代码，它将绝对位于包含元素的0,0，减去100％的包含元素宽度。

这对我来说似乎有点混乱，但这就是测试所显示的内容。

祝你好运！

MooTools Tween百分比

2 个答案: