这个js代码与我的css有什么关系?

时间:2014-10-18 18:02:52

标签: javascript

我正在尝试将AnimOnScroll.js集成到我的网站中。

我在下一行收到'无法读取属性ID':

this.items = Array.prototype.slice.call( document.querySelectorAll( '.container' + this.el.id + '.grid_4' ) );

我猜我需要在AnimOnScroll中编辑这一行吗?

我的布局是这样的:

<div class="container">
  <div class="grid_4"></div> 
  <div class="grid_4"></div>
  <div class="grid_4"></div> 
  <div class="grid_4"></div>
</div>

通过以下信息,我应该如何编辑上面的js行?

这是完整的JS:

function AnimOnScroll( el, options ) {  
        this.el = el;
        this.options = extend( this.defaults, options );
        this._init();
    }

    AnimOnScroll.prototype = {
        defaults : {
            // Minimum and a maximum duration of the animation (random value is chosen)
            minDuration : 0,
            maxDuration : 0,
            // The viewportFactor defines how much of the appearing item has to be visible in order to trigger the animation
            // if we'd use a value of 0, this would mean that it would add the animation class as soon as the item is in the viewport. 
            // If we were to use the value of 1, the animation would only be triggered when we see all of the item in the viewport (100% of it)
            viewportFactor : 0
        },
        _init : function() {
            this.items = Array.prototype.slice.call( document.querySelectorAll( '.container' + this.el.id + '.grid_4' ) );
            this.itemsCount = this.items.length;
            this.itemsRenderedCount = 0;
            this.didScroll = false;

            var self = this;

            imagesLoaded( this.el, function() {

                // initialize masonry
                new Masonry( self.el, {
                    itemSelector: '.grid_4',
                    transitionDuration : 0
                } );

                if( Modernizr.cssanimations ) {
                    // the items already shown...
                    self.items.forEach( function( el, i ) {
                        if( inViewport( el ) ) {
                            self._checkTotalRendered();
                            classie.add( el, 'shown' );
                        }
                    } );

                    // animate on scroll the items inside the viewport
                    window.addEventListener( 'scroll', function() {
                        self._onScrollFn();
                    }, false );
                    window.addEventListener( 'resize', function() {
                        self._resizeHandler();
                    }, false );
                }

            });
        },

0 个答案:

没有答案