使滚动动画不停止但平滑

时间:2013-04-23 19:43:31

标签: jquery animation scroll smooth

你们有任何想法让这个(http://hvlmnns.de/middle/)更顺畅吗? 在我的系统上它有点卡住了。

拥有这种ios后滚动效果也不错。

这是代码

$(document).ready(function(){
    var wx=$(window).width(),wy=$(window).height(),dx=$(document).width(),dy=$(document).height();
$('html,body').width(dx).height(dy).stop().animate({scrollTop:(dy-wy)/2,scrollLeft:((dx-wx)/2)},0);
$(document).mousemove(function(e){
    var x=(dx-wx)*((e.pageX-$(window).scrollLeft())/wx);
    var y=(dy-wy)*((e.pageY-$(window).scrollTop())/wy);
    $('body').scrollLeft(x).scrollTop(y);

});
});

我不确定这个动画和dequeue()的东西,但我认为这将是最终的解决方案,但我怎么说没有线索来平滑滚动动画而不是一直停止。

1 个答案:

答案 0 :(得分:0)

有点想通了 http://hvlmnns.de/middle/

不是最顺利的事情,而不是最好的事情,但这必须做好工作

$(document).ready(function () {
    $('body').css({
        position: 'relative',
        margin: 0,
        padding: 0,
        overflow: 'hidden',
        width: '100%',
        height: '100%'
    })
    var wx = $(window).width(),
        wy = $(window).height(),
        dx = $(document).width(),
        dy = $(document).height();
    $('body').width(dx).height(dy).scrollTop((dy - wy) / 2).scrollLeft((dx - wx) / 2);
    var x = 0,
        y = 0;
    $(document).mousemove(function (e) {
        x = (dx - wx) * ((e.pageX - $(window).scrollLeft()) / wx);
        y = (dy - wy) * ((e.pageY - $(window).scrollTop()) / wy);
    });
    var obj = $('body');
    var xp = 0,
        yp = 0;
    $('body').scrollTop((dy - wy) / 2).scrollLeft((dx - wx) / 2);
    var loop = setInterval(function () {
        xp += (x - xp) / 60;
            yp += (y - yp) / 60;
        obj.scrollTop(yp).scrollLeft(xp);
    }, 1);
});