|
...
|
...
|
@@ -6,16 +6,19 @@ |
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Swiper = require('yoho-swiper'),
|
|
|
|
tip = require('../plugin/tip'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
|
|
ellipsis = require('yoho-mlellipsis');
|
|
|
|
ellipsis = require('yoho-mlellipsis'),
|
|
|
|
loading = require('../plugin/loading'),
|
|
|
|
PullRefresh = require('../plugin/pull-refresh');
|
|
|
|
|
|
|
|
var $window = $(window),
|
|
|
|
$starMain = $('.star-main'),
|
|
|
|
$bannerTop = $('.banner-top'),
|
|
|
|
$starArticle = $('.star-article'),
|
|
|
|
$avatarWrap = $('.avatar-wrap'),
|
|
|
|
bannerLen = $avatarWrap.find('.swiper-slide').length,
|
|
|
|
avatarTop = parseInt($starMain.find('.avatar').css('margin-top'), 10),
|
|
|
|
stopLoading = false,
|
|
|
|
$mainContent = $('.main-content'),
|
|
|
|
$headTab = $('.head-tab'),
|
|
|
|
headTabH = $headTab.height(),
|
|
|
|
scrollH = $(window).height() - headTabH,
|
|
|
|
$loadingTip = $('.loading-tip'),
|
|
|
|
u = navigator.userAgent,
|
|
|
|
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
|
|
|
|
|
|
...
|
...
|
@@ -29,19 +32,22 @@ var $window = $(window), |
|
|
|
var mySwiper;
|
|
|
|
*/
|
|
|
|
|
|
|
|
var res, avatarSwiper, avatarSwiperClone, $avatarClone;
|
|
|
|
var avatarKey, bannerLen, res, avatarSwiper, avatarSwiperClone, getIndexHtml,
|
|
|
|
$avatarClone, $starArticle, $avatarWrap, starIScroll;
|
|
|
|
|
|
|
|
var swiperNum = $('.avatar-wrap .swiper-slide').width() / 2;
|
|
|
|
|
|
|
|
require('../common');
|
|
|
|
|
|
|
|
if ($window.width() === 375 && isiOS) {
|
|
|
|
swiperNum = 32;
|
|
|
|
}
|
|
|
|
|
|
|
|
require('../common');
|
|
|
|
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
ellipsis.init();
|
|
|
|
|
|
|
|
$window.on('mousewheel', false);
|
|
|
|
|
|
|
|
// 限制标题字数
|
|
|
|
function txtLimit(dom, item1, item2) {
|
|
|
|
var $title = dom.find(item1),
|
|
...
|
...
|
@@ -73,7 +79,7 @@ function setAvatar($userAvatar) { |
|
|
|
|
|
|
|
// 明星头像点击居中显示或跳转
|
|
|
|
function bindAvatar(dom) {
|
|
|
|
var avatarKey = dom.index();
|
|
|
|
avatarKey = dom.index();
|
|
|
|
|
|
|
|
if (!dom.hasClass('swiper-slide-active')) {
|
|
|
|
if (avatarKey >= (2 * bannerLen + 1)) {
|
|
...
|
...
|
@@ -91,48 +97,7 @@ function bindAvatar(dom) { |
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 悬浮明星头像
|
|
|
|
function cloneAvatarInit() {
|
|
|
|
if ($window.scrollTop() >= $bannerTop.height() + avatarTop) {
|
|
|
|
$avatarClone.show();
|
|
|
|
|
|
|
|
if (!avatarSwiperClone) {
|
|
|
|
avatarSwiperClone = new Swiper('.avatar-0', {
|
|
|
|
loop: true,
|
|
|
|
initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
|
|
|
|
centeredSlides: true,
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
loopedSlides: bannerLen,
|
|
|
|
spaceBetween: 10,
|
|
|
|
slidesOffsetBefore: -swiperNum,
|
|
|
|
watchSlidesProgress: true,
|
|
|
|
watchSlidesVisibility: true,
|
|
|
|
onInit: function() {
|
|
|
|
$('.avatar-0 li').on('click', function() {
|
|
|
|
res = bindAvatar($(this));
|
|
|
|
return res;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
avatarSwiperClone.params.control = avatarSwiper;
|
|
|
|
avatarSwiper.params.control = avatarSwiperClone;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
$avatarClone.hide();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// 初始化首页各种效果
|
|
|
|
function initAction() {
|
|
|
|
$starMain.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
|
|
|
|
$avatarClone = $('.avatar-clone');
|
|
|
|
|
|
|
|
// 限制标题字数
|
|
|
|
$('.cont-area').each(function() {
|
|
|
|
txtLimit($(this), '.title', '.cont-txt');
|
|
|
|
});
|
|
|
|
|
|
|
|
function setIndexAction() {
|
|
|
|
$('.avatar').each(function(key, item) {
|
|
|
|
$(item).addClass('avatar-' + key);
|
|
|
|
});
|
|
...
|
...
|
@@ -198,14 +163,123 @@ function initAction() { |
|
|
|
$('#yoho-header, .head-tab').on('touchmove', function() {
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function initAction() {
|
|
|
|
$starArticle = $('.star-article');
|
|
|
|
$avatarWrap = $('.avatar-wrap');
|
|
|
|
bannerLen = $('.avatar-wrap').find('.swiper-slide').length;
|
|
|
|
|
|
|
|
if ($avatarClone) {
|
|
|
|
$avatarClone.remove();
|
|
|
|
}
|
|
|
|
|
|
|
|
$loadingTip.before($('.avatar-swiper').clone().addClass('avatar-clone').hide());
|
|
|
|
|
|
|
|
cloneAvatarInit();
|
|
|
|
$avatarClone = $('.avatar-clone');
|
|
|
|
|
|
|
|
// 限制标题字数
|
|
|
|
$('.cont-area').each(function() {
|
|
|
|
txtLimit($(this), '.title', '.cont-txt');
|
|
|
|
});
|
|
|
|
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
|
|
|
|
setIndexAction();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 首页数据请求
|
|
|
|
getIndexHtml = function() {
|
|
|
|
loading.showLoadingMask();
|
|
|
|
$.ajax({
|
|
|
|
url: '/guang/star/getIndexHtml',
|
|
|
|
dataType: 'html',
|
|
|
|
success: function(data) {
|
|
|
|
stopLoading = false;
|
|
|
|
|
|
|
|
if (data) {
|
|
|
|
if (avatarSwiperClone) {
|
|
|
|
avatarSwiperClone.destroy(true, true);
|
|
|
|
avatarSwiperClone = '';
|
|
|
|
}
|
|
|
|
|
|
|
|
$mainContent.html(data);
|
|
|
|
|
|
|
|
initAction();
|
|
|
|
}
|
|
|
|
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
initAction();
|
|
|
|
|
|
|
|
$window.scroll(function() {
|
|
|
|
cloneAvatarInit();
|
|
|
|
// 下拉刷新，上拉加载
|
|
|
|
starIScroll = new PullRefresh('.star-main', {
|
|
|
|
height: scrollH,
|
|
|
|
pullDown: function() {
|
|
|
|
if (!stopLoading) {
|
|
|
|
stopLoading = true;
|
|
|
|
getIndexHtml();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
starIScroll.iScroll.on('scrollStart', function() {
|
|
|
|
// 下拉
|
|
|
|
if (this.directionY === -1) {
|
|
|
|
$loadingTip.slideDown();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
starIScroll.iScroll.on('scroll', function() {
|
|
|
|
if (this.directionY !== -1) {
|
|
|
|
starIScroll.iScroll.refresh();
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($avatarWrap.offset().top <= headTabH) {
|
|
|
|
$avatarClone.show();
|
|
|
|
|
|
|
|
if (!avatarSwiperClone) {
|
|
|
|
avatarSwiperClone = new Swiper('.avatar-0', {
|
|
|
|
loop: true,
|
|
|
|
initialSlide: $('.avatar-1').find('.swiper-slide-active').index() % bannerLen,
|
|
|
|
centeredSlides: true,
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
loopedSlides: bannerLen,
|
|
|
|
spaceBetween: 10,
|
|
|
|
slidesOffsetBefore: -swiperNum,
|
|
|
|
watchSlidesProgress: true,
|
|
|
|
watchSlidesVisibility: true,
|
|
|
|
onInit: function() {
|
|
|
|
$('.avatar-0 li').on('click', function() {
|
|
|
|
res = bindAvatar($(this));
|
|
|
|
return res;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
avatarSwiperClone.params.control = avatarSwiper;
|
|
|
|
avatarSwiper.params.control = avatarSwiperClone;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($avatarWrap.offset().top > $('.avatar-1')[0].scrollHeight) {
|
|
|
|
$avatarClone.hide();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
starIScroll.iScroll.on('scrollEnd', function() {
|
|
|
|
$loadingTip.slideUp();
|
|
|
|
});
|
|
|
|
|
|
|
|
$('img').on('load', function() {
|
|
|
|
starIScroll && starIScroll.iScroll.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
window.setCookie('guangStarUid', window.queryString.uid);
|
...
|
...
|
|
