Question

所以这是一个我想用JavaScript解决的数学问题。我在网站上创建一个固定画布，根据从窗口顶部的特定.offset（）。顶部滚动的每X个像素数输出不同的图像。我可以＆＃39;明确地将新图像映射到特定位置但是我有很多图像，我应该创建一个可以多次处理此过程直到特定终点的函数。我有点坚持如何表达这一点，并想知道是否有人能引导我朝着正确的方向前进。

修改

在考虑@Richard Hamilton回答下面后，我已经能够成功地将他的解决方案应用到我自己的项目中。它有点冗长，但这就是我所拥有的......

// Preload Images
var totalImages = 203
var images = new Array()
for (var i = 1; i <= totalImages; i++) {

    var filename = 'img_'
    if (i < 10) filename += '00'
    if (i > 9 && i < 100) filename += '0'
    filename += i + '.jpg'

    var img = new Image
    img.src = '/images/temp/' + filename

    images.push(img)
}

//  Set initial frame index
var currentLocation = 0

// Canvas Context
var canv = document.getElementById('canvas')
var context = canv.getContext('2d')
$(canv)
    .width(768)
    .height(432)

// Frame Starting Location
var currentLocation = 0

// Determin the breakpoint increment to fit inside the context
var contextHeight = $('.about--context').height() - 200
var frameHeight = contextHeight / totalImages

// Set first breakpoint
var breakpoint = 63

// Get top of context in relation to window
var contextPos = $('.about--context').offset().top - $(window).scrollTop()

// Set where to start scrubbing through frames
var scrubStart = 62

// Initial scroll direction
var lastScrollTop = 0,
    st,
    direction

// Output the scroll direction as up or down
function detectDirection() {

    st = window.pageYOffset;
    if (st > lastScrollTop) {
        direction = "down"
    } else {
        direction = "up"
    }
    lastScrollTop = st
    return direction

}

window.addEventListener('scroll', function() {

    var dir = detectDirection()

    var contextPos = $('.about--context').offset().top - $(window).scrollTop()
    var contextHeight = $('.about--context').height()
    var frameHeight = contextHeight / totalImages

    if (contextPos <= breakpoint && dir === 'down') {
        breakpoint -= frameHeight
        currentLocation++
        context.drawImage(images[currentLocation], 0, 0, 768, 432)
        console.log('Breakpoint = ' + breakpoint + ', index = ' + currentLocation)
    }
    if (contextPos > breakpoint && dir === 'up') {
        breakpoint += frameHeight
        currentLocation--
        context.drawImage(images[currentLocation], 0, 0, 768, 432)
        console.log('Breakpoint = ' + breakpoint + ', index = ' + currentLocation)
    }

})

这主要起作用，但在鼠标滚轮和触控板之间滚动期间帧的变化似乎存在差异。触控板更灵敏，并且可以正确地获得断点增量，但鼠标滚轮最终更快地滚动通过该部分而没有正确地保持正确的帧速率，所以我永远不会到达最后一帧到达最后一帧。部分。除此之外，当向上和向下滚动时帧正确移动。

Answer 1

我们假设你有一个图片标签。如果你有很多不同的图像文件，最好将它们存储在数组中。这是一个硬编码的例子，但显示了一般结构。

var image = document.getElementById("myImage");
var sources = ["image1.png", "image2.png", "image3.png", "image4.png"];

var i = 0;
var breakpoint = 100;                           // Change to whatever you like

window.addEventListener("scroll", function() {
    var scrollDown = document.body.scrollTop;
    if (scrollDown >= breakpoint) {
       img.setAttribute(src, sources[i]);
       breakpoint += 100;                       //Change to whatever you like
       i++;
    }
}

你也可以包含这样的内容

 var windowHeight = window.innerHeight;
 var scrollBottom = document.body.clientHeight - document.body.scrollTop;
 if (scrollBottom === windowHeight) {
     // Do something
 }

首先设置一个断点变量，该变量等于要滚动的像素数。举个例子，我选择100，因为它是一个很好的整数。然后，在window对象上附加一个事件侦听器，以检测用户是否正在滚动。

scrollTop函数表示屏幕顶部距离窗口顶部的距离。如果该值高于断点，那就是我们调用代码时的值。然后我们将此增加100。

如何让JavaScript在每X个像素数滚动时执行某些操作

1 个答案: