滚动图像更改 [英] Image change on scroll

问题描述

继其他 SO问题之后

此脚本更改页面滚动上的图像。但是，如果这个脚本用于具有200多个图像的视频帧，则该脚本会过大。是否可以缩短此脚本以用于大量文件？

This script changes an image on page scroll. However this script would be excessively large if it was for example, used for frames of a video with 200+ images. Is it possible to shorten this script for use with large number of files?

非常感谢

推荐答案

次要代码调整......

Minor code tweaks...

http://jsfiddle.net/gvee/ygkWH/6/

<img src="http://placekitten.com/100/100" /><b>Frame: 0</b>

[说明] CSS

[illustrative] CSS

img, b {
    position: fixed;
    top: 0;
    left: 0;
}
body {
    height: 10000px;
}

JQuery

JQuery

// Array of images to swap between
var images = [];

// Add 200 items to array
for (i = 0; i < 200; i++) {
    images.push('http://placekitten.com/' + (100 + i) + '/' + (100 + i));
}

var totalImages = images.length;

var pageHeight = $(document).height() - $(window).height();

// Work out how often we should change image (i.e. how far we scroll between changes)
var scrollInterval = Math.floor(pageHeight / totalImages);

$(document).scroll(function () {
    // Which one should we show at this scroll point?
    i = Math.floor($(this).scrollTop() / scrollInterval);
    // Show the corresponding image from the array
    $('img').attr('src', images[i]);
    $('b').text('Frame: ' + i);
});

这篇关于滚动图像更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！