Question

我有一个有多个背景的正文/页面：

body {
    background-image: url("../../../myfiles/headers/mandala-bottom.png"),url("../../../myfiles/backgrounds/bottom-fade.png"), url("../../../myfiles/backgrounds/small-fill.jpg");
    background-repeat:no-repeat, repeat-x,  repeat;
    background-attachment:scroll, scroll,  scroll;
    background-position:bottom center, bottom center,  top;
    }
#page {
    background:url("../../../myfiles/backgrounds/top-fade.png") repeat-x fixed top center
    }

底部有一张图片，没有重复，向上滚动;在这个底部的图片，水平重复，也向上滚动;顶部的图片，在一个单独的div中，滚动得更慢（下面解释），最后是一个填充，照顾中间部分。

为了获得半视差效果（不影响内容，常规的wordpress循环），我在单独的图层#page中有顶部渐变背景，以减慢其滚动速度。

jQuery的：

 $(document).ready(function(){
                var $win = $(window);

                $('div#page').each(function(){
                var scroll_speed = 8;
                var $this = $(this);
                    $(window).scroll(function() {
                        var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
                        var bgPosition = 'center '+ bgScroll + 'px';
                        $this.css({ backgroundPosition: bgPosition });
                        });
                    });
                });

此解决方案有效（尽管使用滚轮滚动有点不稳定，特别是在IE中）。

我在想，如果我也可以将相同的效果应用到我的底部淡入淡出图像，那就更好了。为此，我应该创建另一个div，这使我的标记有点过于嵌套我的口味。

我想知道：有没有办法让jQuery直接与多个背景交互？

如果有，我可以使用它来应用不同的滚动效果，同时将所有图片放在同一个元素中吗？

将滚动效果应用于多个身体背景

0 个答案: