Javascript 这个js代码与我的css有什么关系?
我正在尝试将AnimOnScroll.js集成到我的网站中 我在以下行收到“无法读取属性id”:Javascript 这个js代码与我的css有什么关系?,javascript,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"
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>
是的,没有要插入的id属性,您可以尝试只插入“.container.grid_4”,它将以内部divsThanks为目标,我将尝试一下,然后返回报告。
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 );
}
});
},