Question

我试图以px为基础在px上滚动显示图像。与此网站如何为红线设置动画类似http://www.teslamotors.com/goelectric#。图像需要隐藏在相同的庄园中，因此如果用户向上滚动，他们将看到更少的线。

我觉得我越来越近了，但我的javascript不太适合鼻烟。这是我到目前为止所做的一个网址，http://trippruitt.com/fuckinLineAnimationBullshit/，这是我的脚本。任何帮助将非常感谢，谢谢！

init();

/*==========  init calls all custom functions  ==========*/
function init() {

    $(window).on("scroll", scrolling);
    console.log("init works");
}
/*==========  ==========  ==========*/


/*==========  get scrollTop  ==========*/
function getScrollTop(){
    if(typeof pageYOffset!= 'undefined'){
        //most browsers except IE before #9
        return pageYOffset;
    }
    else{
        var B= document.body; //IE 'quirks'
        var D= document.documentElement; //IE with doctype
        D= (D.clientHeight)? D: B;
        return D.scrollTop;
    }
}
/*==========  ==========  ==========*/


/*==========  scrolling function  ==========*/
function scrolling() {

    console.log(getScrollTop());

    if (getScrollTop() > 64) {
        addHeight();
    }
}
/*==========  ==========  ==========*/


/*==========  add height to line  ==========*/
function addHeight() {

    $(window).on("scroll", function() {
        var i = 0,
            line = $(".fuckinLine");
        while (i < 209) {
            line.css("height", i++ + "px");
            event.preventDefault();
            console.log("addHeight works");
        }
    });
}
/*==========  ==========  ==========*/

Answer 1

你的问题在于：

function addHeight() {

    $(window).on("scroll", function() {
        var i = 0,
            line = $(".fuckinLine");
        while (i < 209) {
            line.css("height", i++ + "px");
            event.preventDefault();
            console.log("addHeight works");
        }
    });
}

您已在init函数中为$(window).on("scroll", function() {设置了一个事件。通过这样做，每次窗口滚动时，你基本上都会执行两次addHeight函数。

这应该适合你：

/*==========  scrolling function  ==========*/
function scrolling() {

    console.log(getScrollTop());
    addHeight(getScrollTop());
//Great place for logic to addwidth to make the line move horizontally.
}
/*==========  ==========  ==========*/


/*==========  add height to line  ==========*/
function addHeight(newHeight) {
    $(".fuckinLine").css("height", newHeight + "px");
}
/*==========  ==========  ==========*/

注意我也删除了while循环。这将使div在一次滚动后保持增长到最大高度。我们只希望在窗口滚动的每个像素上扩展1px。

在滚动上显示图像

1 个答案: