0

我正在制作类似于 www.yesstudio.co.uk 的导航。当您向下滚动页面时，固定位置的图像会更改以显示其中一个图像。

这是我的例子，它工作正常。我已经将隐藏的图像制作成半透明的，这样你就可以看到发生了什么。 http://smartpeopletalkfast.co.uk/demo/12.html

问题是换出图像的 javascript 手动重复了所需的 8 次。我还在要更改的图像的 src 中硬编码。我打算将此代码与 CMS 一起使用，因此我需要一个更智能的解决方案，该解决方案可以从页面获取图像的 src，并且还可以处理超过 8 个图像。

$(window).bind("load scroll", function() {  

            // get the height of the page
            var bodyHeight = $('body').height();        

            //get the current scroll position
            var scrollPos = $(window).scrollTop();

            //get the height of the viewport 
            var viewportHeight = $(window).height();    

            //get the number of images in the list
            var numberImages = $("#image-list img").size(); 

            //the amount needed to scroll for each image is the page height minus the viewport height, 
            var scrollInterval = ( (bodyHeight - viewportHeight) / (numberImages) ); 


            //for each scroll intervall assign the correct image. 
            if (scrollPos < scrollInterval) {
                $('#img-main').attr('src', 'images/1.jpg');
            }
            if (scrollPos > scrollInterval && scrollPos < (scrollInterval*2) )  {   
                $('#img-main').attr('src', 'images/2.jpg');
            }
            if (scrollPos > (scrollInterval*2) && scrollPos < (scrollInterval*3) )  {
                $('#img-main').attr('src', 'images/3.jpg');
            }
            if (scrollPos > (scrollInterval*3) && scrollPos < (scrollInterval*4) )  {
                $('#img-main').attr('src', 'images/4.jpg');
            }
            if (scrollPos > (scrollInterval*4) && scrollPos < (scrollInterval*5) )  {
                $('#img-main').attr('src', 'images/5.jpg');
            }
            if (scrollPos > (scrollInterval*5) && scrollPos < (scrollInterval*6) )  {
                $('#img-main').attr('src', 'images/6.jpg');
            }
            if (scrollPos > (scrollInterval*6) && scrollPos < (scrollInterval*7) )  {
                $('#img-main').attr('src', 'images/7.jpg');
            }
            if (scrollPos > (scrollInterval*7) && scrollPos < (scrollInterval*8) )  {
                $('#img-main').attr('src', 'images/8.jpg');
            }               

        });

更新 - 有人可以告诉我我应该用谷歌搜索来解决这个问题吗？我现在不知道从哪里开始。谢谢

更新 - 文件名不会总是整洁的 1.jpg。2.jpg 等。它们可以是任何东西。

4

2 回答 2

0 
$('#img-main').attr('src', 'images/' + (scrollPos / scrollInterval).toString() + '.jpg');
于 2013-08-08T15:47:04.053 回答
0 
var defaultFile = 'someDefualtFile.fl'; 
var fileNames = (
    'images/thisIsTheFirstFile.jpg',
    'images/thisIsNotAFile.png',
    'images/testTest.test'
    ...
    ...
    ...
);

var index = Math.floor($(window).scrollTop() / scrollInterval );
var file = fileNames[index] || defaultFile;
$('#img-main').attr('src', file);
于 2013-08-08T15:58:09.303 回答