Question

http://www.weblinc.com/labs/jquery-parallax/

我已经遵循了这一点，它对我不起作用，查看演示的源代码，它与教程完全不同，是否适用于其他人？还是坏了

<html>
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="global.css"/>
    <script script type="text/javascript" src="jquery.parallax.js"></script>
    </head>

    <body>
    <script>
$('.bg-far').parallax({ speed: 0.2, axis: 'x' }); 
$('.bg-close').parallax({ speed: 0.5, axis: 'x' });
</script>
    <div class="bg-far bg"></div> 
<div class="bg-close bg"></div> 
    </body>
</html>


.bg { 
position: absolute; 
top: 0; 
left: 0; 
height: 7000px; 
width: 100%; 
background-repeat: repeat; 
} 

.bg-far { 
background-image: url(bg1.png); 
opacity: 0.8; 
z-index: 5; 
} 

.bg-close { 
background-image: url(bg2.png); 
z-index: 10; 
}

这是jquery：

// jquery.parallax.js
// @weblinc, @jsantell, (c) 2012

;(function( $ ) {
    $.fn.parallax = function ( userSettings ) {
        var options = $.extend( {}, $.fn.parallax.defaults, userSettings );

        return this.each(function () {
            var $this   = $(this),
                isX     = options.axis === 'x',
                origPos = ( $this.css( 'background-position' ) || '' ).split(' '),
                origX   = $this.css( 'background-position-x' ) || origPos[ 0 ],
                origY   = $this.css( 'background-position-y' ) || origPos[ 1 ],
                dist    = function () {
                    return -$( window )[ isX ? 'scrollLeft' : 'scrollTop' ]();
                };
            $this
                .css( 'background-attachment', 'fixed' )
                .addClass( 'inview' );

            $this.bind('inview', function ( e, visible ) {
                $this[ visible ? 'addClass' : 'removeClass' ]( 'inview' );
            });

            $( window ).bind( 'scroll', function () {
                if ( !$this.hasClass( 'inview' )) { return; }
                var xPos = isX ? ( dist() * options.speed ) + 'px' : origX,
                    yPos = isX ? origY : ( dist() * options.speed ) + 'px';
                $this.css( 'background-position', xPos + ' ' + yPos );
            });
        });
    };

    $.fn.parallax.defaults = {
        start: 0,
        stop: $( document ).height(),
        speed: 1,
        axis: 'x'
    };

})( jQuery );

不会像演示一样移动

Answer 1

代码是正确的，它只是高度依赖于你执行这些步骤的顺序。如果在之前你有jQuery代码，它们在执行时就不会存在，所以不会选择任何东西，代码不会做任何事情。有两种方法可以解决这个问题：

首先声明您的HTML元素，然后将<script>标记用于初始化插件（这是他们在示例中完成的顺序）。

<div class="bg-far bg"></div> <div class="bg-close bg"></div> <script> $('.bg-far').parallax({ speed: 0.2, axis: 'x' }); $('.bg-close').parallax({ speed: 0.5, axis: 'x' }); </script>

使用DOM就绪处理程序。

$(document).ready(function() { $('.bg-far').parallax({ speed: 0.2, axis: 'x' }); $('.bg-close').parallax({ speed: 0.5, axis: 'x' }); });

2通常是首选方法，因为您不必担心代码与其交互的元素的位置。

您还需要在 jquery.js文件之前加入jquery.parallax.js 。

我跟着这个，但似乎无法让它工作

1 个答案: