|
...
|
...
|
@@ -6,7 +6,97 @@ |
|
|
|
|
|
|
|
var $ = require('yoho.zepto'),
|
|
|
|
ellipsis = require('mlellipsis'),
|
|
|
|
lazyLoad = require('yoho.lazyload');
|
|
|
|
lazyLoad = require('yoho.lazyload'),
|
|
|
|
IScroll = require('iscroll/iscroll-probe');
|
|
|
|
|
|
|
|
var $authorIntro = $('.author .intro');
|
|
|
|
|
|
|
|
var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
|
|
|
|
|
|
|
|
var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;
|
|
|
|
|
|
|
|
//collocation block variable
|
|
|
|
var thumbWidth = 0,
|
|
|
|
$fixedThumbContainer = $(''),
|
|
|
|
$coBlock, $thumbContainer, $thumbs, $prods,
|
|
|
|
scrollToEl;
|
|
|
|
|
|
|
|
var scrollToEl = document.querySelector('#wrapper .collocation-block');
|
|
|
|
|
|
|
|
var winW = $(window).width();
|
|
|
|
|
|
|
|
var myScroll;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 计算搭配的箭头的位置
|
|
|
|
* @param $curPos 当前focus的搭配项
|
|
|
|
*/
|
|
|
|
function posCollocationArrow($curCo) {
|
|
|
|
var left = $curCo.offset().left,
|
|
|
|
bgPos = -winW + left + (thumbWidth / 2) + 'px';
|
|
|
|
|
|
|
|
$thumbContainer.css({
|
|
|
|
backgroundPosition: bgPos + ' bottom'
|
|
|
|
});
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
$fixedThumbContainer.css({
|
|
|
|
backgroundPosition: bgPos + ' bottom'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//搭配thumb的touch事件句柄
|
|
|
|
function thumbTouchEvt(e) {
|
|
|
|
var $curCo = $(e.currentTarget),
|
|
|
|
index = $curCo.index(),
|
|
|
|
$brother, $brotherCo,
|
|
|
|
$curProds;
|
|
|
|
|
|
|
|
if ($curCo.hasClass('focus')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$thumbs.filter('.focus').removeClass('focus');
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
if ($curCo.closest('.fixed-thumb-container').length > 0) {
|
|
|
|
$brother = $thumbContainer;
|
|
|
|
} else {
|
|
|
|
$brother = $fixedThumbContainer;
|
|
|
|
}
|
|
|
|
|
|
|
|
$brotherCo = $brother.find('.thumb').eq(index);
|
|
|
|
$fixedThumbContainer.find('.thumb.focus').removeClass('focus');
|
|
|
|
$brotherCo.addClass('focus');
|
|
|
|
}
|
|
|
|
|
|
|
|
$curCo.addClass('focus');
|
|
|
|
|
|
|
|
//定位arrow
|
|
|
|
posCollocationArrow($curCo);
|
|
|
|
|
|
|
|
$prods.not('.hide').addClass('hide');
|
|
|
|
$curProds = $prods.eq(index);
|
|
|
|
$curProds.removeClass('hide');
|
|
|
|
|
|
|
|
//
|
|
|
|
lazyLoad($curProds.find('.lazy'));
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
if (myScroll) {
|
|
|
|
myScroll.scrollToElement(scrollToEl, 400);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$('body').animate({
|
|
|
|
scrollTop: $coBlock.offset().top
|
|
|
|
}, 400);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
$('#wrapper').addClass('ios');
|
|
|
|
}
|
|
|
|
|
|
|
|
ellipsis.init();
|
|
|
|
|
|
...
|
...
|
@@ -15,4 +105,114 @@ lazyLoad($('.lazy')); |
|
|
|
//title mlellipsis
|
|
|
|
$('.info-list .title, .one-good .reco-name').each(function() {
|
|
|
|
this.mlellipsis(2);
|
|
|
|
}); |
|
|
\ No newline at end of file |
|
|
|
});
|
|
|
|
|
|
|
|
//offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名
|
|
|
|
if (parseInt($authorIntro.offset().left, 10) === parseInt($authorIntro.css('margin-left'), 10)) {
|
|
|
|
$authorIntro.css('padding-top', 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
//有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
|
|
|
|
if (hasCollocationBlock) {
|
|
|
|
$coBlock = $('.collocation-block');
|
|
|
|
$thumbContainer = $coBlock.children('.thumb-container');
|
|
|
|
$thumbs = $thumbContainer.find('li');
|
|
|
|
$prods = $coBlock.find('.prod');
|
|
|
|
|
|
|
|
thumbWidth = $thumbs.width();
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
$fixedThumbContainer = $('#wrapper')
|
|
|
|
.after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
|
|
|
|
.next('.thumb-container');
|
|
|
|
|
|
|
|
//load img of fixed thumb container
|
|
|
|
lazyLoad($fixedThumbContainer.find('.lazy'), {
|
|
|
|
event: 'sporty'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
//Init Arrow Position
|
|
|
|
posCollocationArrow($thumbs.filter('.focus'));
|
|
|
|
|
|
|
|
$thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
|
|
|
|
|
|
|
|
if (isIphone) {
|
|
|
|
$fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 初始化iscroll
|
|
|
|
window.onload = function() {
|
|
|
|
var $scroller = $('#scroller');
|
|
|
|
|
|
|
|
var winH, tcH, cbH, cbTop, fixedThumbDom;
|
|
|
|
|
|
|
|
if (!isIphone) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
myScroll = new IScroll('#wrapper', {
|
|
|
|
probeType: 3,
|
|
|
|
mouseWheel: true,
|
|
|
|
click: true
|
|
|
|
});
|
|
|
|
|
|
|
|
document.addEventListener('touchmove', function (e) {
|
|
|
|
e.preventDefault();
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
if (!hasCollocationBlock) {
|
|
|
|
myScroll.on('scroll', function() {
|
|
|
|
$scroller.trigger('scroll');
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
winH = $(window).height();
|
|
|
|
fixedThumbDom = $fixedThumbContainer[0];
|
|
|
|
|
|
|
|
tcH = $thumbContainer.height();
|
|
|
|
cbH = $coBlock.height();
|
|
|
|
cbTop = $coBlock.offset().top;
|
|
|
|
|
|
|
|
myScroll.on('scroll', function() {
|
|
|
|
var sTop = -this.y;
|
|
|
|
var classList = fixedThumbDom.className;
|
|
|
|
|
|
|
|
if (sTop <= cbTop - winH + tcH) {
|
|
|
|
if (classList.indexOf('fixed-bottom') === -1) {
|
|
|
|
$fixedThumbContainer
|
|
|
|
.addClass('fixed-bottom')
|
|
|
|
.removeClass('hide');
|
|
|
|
}
|
|
|
|
} else if (sTop <= cbTop) {
|
|
|
|
if (classList.indexOf('hide') === -1) {
|
|
|
|
$fixedThumbContainer
|
|
|
|
.addClass('hide')
|
|
|
|
.removeClass('fixed-bottom fixed-top');
|
|
|
|
}
|
|
|
|
} else if (sTop <= cbTop + cbH - tcH) {
|
|
|
|
if (classList.indexOf('fixed-top') === -1) {
|
|
|
|
$fixedThumbContainer
|
|
|
|
.addClass('fixed-top')
|
|
|
|
.removeClass('hide absolute')
|
|
|
|
.css('top', '');
|
|
|
|
}
|
|
|
|
} else if (sTop <= cbTop + cbH) {
|
|
|
|
if (classList.indexOf('absolute') === -1) {
|
|
|
|
$fixedThumbContainer
|
|
|
|
.addClass('absolute')
|
|
|
|
.removeClass('fixed-top hide');
|
|
|
|
}
|
|
|
|
fixedThumbDom.style.top = cbTop + cbH - tcH - sTop + 'px';
|
|
|
|
} else if (sTop > cbTop + cbH) {
|
|
|
|
if (classList.indexOf('hide') === -1) {
|
|
|
|
$fixedThumbContainer
|
|
|
|
.addClass('hide')
|
|
|
|
.removeClass('absolute');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$scroller.trigger('scroll');
|
|
|
|
});
|
|
|
|
}; |
|
|
\ No newline at end of file |
...
|
...
|
|
