2016/02/11 grid3D.js

标签：

;(function(window){
‘use strict‘;
function grid3D(el,options){
this.el = el;
this.options = extend({},this.options);
extend(this.options,options);
this._init();
}
grid3D.prototype.options = {};
grid3D.prototype._init = function(){
this.gridWrap = this.el.querySelector(‘div.grid-wrap‘);
this.grid = this.gridWrap.querySelector(‘div.grid‘);
this.gridItems = [].slice.call(this.grid.children);
this.itemSize = { width:this.gridItems[0].offsetWidth,height:this.gridItems[0].offsetHeight};
this.contentEl = this.el.querySelector(‘div.content‘);
this.contentItems = [].slice.call(this.contentEl.children);
this.close = this.contentEl.querySelector(‘span.close-content‘);
this.loader = this.contentEl.querySelector(‘span.loading‘);
this.support = support.pointerevents&&support.csstransitions&&support.csstransform3d;
this._initEvents();
};
grid3D.prototype._initEvents = function(){
var self = this;
this.gridItems.forEach(function(item,idx){
item.addEventListener(‘click‘,function(){
self._showContent(idx);
});
});
this.close.addEventListener(‘click‘,function(){
self._hideContent();
});
if(this.support){
window.addEventListener(‘resize‘,function(){self._resizeHandler();});
window.addEventListener(‘scroll‘,function(){
if(self.isAnimating){
window.scrollTo(self.scrollPosition?self.scrollPosition.x:0,self.scrollPosition?self.scrollPosition.y:0);
}
else{
self.scrollPosition = {x : window.pageXOffset || docElem.scrollLeft,y : window.pageXOffset || docElem.scrollTop};
self._scrollHandler();
}
});
}
}
grid3D.prototype._showContent = function(pos){
if(this.isAnimating){
return false;
}
this.isAnimating = true;
var self = this,
loadContent = function(){
setTimeout(function(){
classie.removeClass(self.loader,‘show‘);
classie.addClass(self.contentItems[pos],‘show‘);
},1000);
classie.addClass(self.contentEl,‘show‘);
classie.addClass(self.loader,‘show‘);
classie.addClass(document.body,‘noscroll‘);
self.isAnimating = false;
};
if(!this.support){
loadContent();
return false;
}
var currentItem = this.gridItems[pos],
itemContent = currentItem.innerHTML;
this.placeholder = this._createPlaceholder(itemContent);
this.placeholder.style.left = currentItem.offsetLeft + "px";
this.placeholder.style.top = currentItem.offsetTop + "px";
this.grid.appendChild(this.placeholder);
var animFn = function(){
classie.addClass(currentItem,‘active‘);
classie.addCladd(self.gridWrap,‘view-full‘);
self._resizePlaceholder();
var onEndTransitionFn = function(ev){
if(ev.propertyName.indexOf(‘transform‘) == -1)return false;
this.removeEventListener(transEndEventName,onEndTransitionFn);
loadContent();
};
self.placeholder.addEventListener(transEndEventName,onEndTransitionFn);
};
setTimeout(animFn,25);
};
grid3D.prototype._hideContent = function(){
var self = this,
currentItem = this.el.querySelector(‘div.content>.show‘),
currentItem = this.gridItems[this.contentItems.indexOf(contentItem)];
classie.removeClass(currentItem,‘show‘);
classie.removeClass(this.contentEl,‘show‘);
setTimeout(function(){
classie.removeClass(document.body,‘noscroll‘);
},25);
if(!this.support)return false;
classie.removeClass(this.gridWrap,‘view-full‘);
this.placeholder.style.left = currentItem.offsetLeft + "px";
this.placeholder.style.top = currentItem.offsetTop + "px";
this.placeholder.style.width = this.itemSize.width + "px";
this.placeholder.style.height = this.itemSize.height + "px";
var onEndPlaceholderTransFn = function(ev){
this.removeEventListener(transEndEventName,onEndPlaceholderTransFn);
self.placeholder.parentNode.removeChild(self.placeholder);
classie.removeClass(currentItem,‘active‘);
};
this.placeholder.addEventListener(transEndEventName,onEndPlaceholderTransFn);
}
grid3D.prototype._createPlaceholder = function(content){
var front = document.creatrElement(‘div‘);
front.className = ‘front‘;
front.innerHTML = content;
var back = document.createElement(‘div‘);
back.className = ‘back‘;
back.innerHTML = ‘&nbsp‘;
var placeholder = documen.createElement(‘div‘);
placeholder.className = ‘placeholder‘;
placeholder.appendChild(front);
placeholder.appendChild(back);
return placeholder;
};
grid3D.prototype._scrollHandler = function(){
var self = this;
if(!this.didScroll){
this.didscroll = true;
setTimeout(function(){self._scrollPage();},60);
}
}
grid3D.prototype._scrollPage = function(){
var perspY = scrollY() + getViewPortH()/2;
this.gridWrap.style.webkitPerspectiveOrigin = ‘50%‘ + perspY + ‘px‘;
this.gridWrap.style.mozPerspectiveOrigin = ‘50%‘ + perspY + ‘px‘;
this.gridWrap.style.perspectiveOrigin = ‘50%‘ + perspY + ‘px‘;
this.didScroll = false;
};
grid3D.prototype._resizeHandler = function(){
var self = this;
function delayed(){
self._resizePlaceholder();
self._scrollPage();
self._resizeTimeout = null;
}
if(this._resizeTimeout){
clearTimeout(this._resizeTimeout);
}
this._resizePlaceholder = setTimeout(delayed,50);
}
grid3D.prototype._resizePlaceholder = function(){
this.itemSize = {width:this.gridItems[0].offsetWidth,height:this.gridItems[0].offsetHeight};
if(this.placeholder){
this.placeholder.style.left = Number(-1 * (this.grid.offsetLeft - scrollX())) + ‘px‘;
this.placeholder.style.top = Number(-1 * (this.grid.offsetTop - scrollX())) + ‘px‘;
this.placeholder.style.width = getViewW() + ‘px‘;
this.placeholder.style.height = getViewH() + ‘px‘;
}
}
window.grid3D = grid3D;
})(window);

2016/02/11 grid3D.js

标签：

原文地址：http://www.cnblogs.com/whatcanido/p/5186723.html