对角线滚动Javascript

时间:2012-05-25 15:13:58

标签: javascript jquery

我在这里遇到了一个问题。我试图对角滚动我的文件。它需要doc宽度和高度,并在每个section元素中添加它的值。我知道如何在y角度滚动它,但是找到一种方法让x角度滚动同步滚动宽度y角。

感谢任何提示!

这是我的js:

$(function() {
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var sectionsNumbers = $("#content section").length - 1;
    var sectionCount = 0;
    // Scroll sets
    var windowScrollX = ((sectionsNumbers + 1) * windowWidth) - windowWidth;
    alert(windowScrollX);
    // Set mask w and h
    $("#mask").css("width", windowWidth);
    $("#mask").css("height", windowHeight);
    $(".scrollRule").css("height", (sectionsNumbers + 1) * windowHeight);
    $("#content section").each(function() {
        // Defines its width and height
        $(this).css("width", windowWidth);
        $(this).css("height", windowHeight);
        // Defines its position
        $(this).css("left", sectionCount * windowWidth);
        $(this).css("top", sectionCount * windowHeight);
        sectionCount++;
    });
    // When window scrolls
    $(window).scroll(function() {
        var curScrollTop = $(window).scrollTop();
        $("#debug").html(curScrollTop);
        $("#content").css("top", "-" + curScrollTop);
    });
});​

我知道了!

我只需要将窗口总宽度除以窗口总滚动高度。谢谢大家!

1 个答案:

答案 0 :(得分:2)

尝试使用jQuery的animate函数。只需将我的代码示例的整数替换为您计算的位置值。

jQuery('html,body').animate(
    {
         scrollTop: 25
         ,scrollLeft: 20
    }
    ,'slow'
);

来源:http://api.jquery.com/animate/