Question

我正在尝试像这样做鼠标滚动效果： http://www.s5-style.com/#!/works（ClientWorks）

但我的问题是，mootools没有一个好的类Tween来做到这一点。然后，我有这个： http://jsfiddle.net/FU9Hp/

$('content').addEvent('mousemove', function(event)
{
        var padding = this.getPosition();
        var size =  this.getSize();
        var scrollpos =  this.getScroll();
        var scrollsize =  this.getScrollSize();
        var mouseX = (event.client.x-padding.x);

        var percent = Math.round(mouseX*100/(size.x));
        var scrollWidth = (scrollsize.x-size.x);


        this.scrollTo(Math.round(percent*scrollWidth/100), 0);  
});

如何使用Tween类来执行s5-style.com的效果？

Answer 1

但我的问题是，mootools没有一个好的类Tween来做到这一点。然后，我有这个：

ER。 mootools有一个很棒的补间。它还有Fx.Scroll和Fx.SmoothScroll，它们将补间绑定到滚动。

以下是具有弹性过渡的滚动示例： http://jsfiddle.net/dimitar/FU9Hp/3/

请参阅http://mootools.net/docs/more/Fx/Fx.Scroll和http://mootools.net/docs/more/Fx/Fx.SmoothScroll

具有补间效果的鼠标滚动[Mootools]

1 个答案: