|
...
|
...
|
@@ -6,14 +6,17 @@ |
|
|
|
|
|
|
|
var $ = require('yoho-jquery'),
|
|
|
|
Swiper = require('yoho-swiper'),
|
|
|
|
tip = require('../plugin/tip'),
|
|
|
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
|
|
ellipsis = require('yoho-mlellipsis'),
|
|
|
|
loading = require('../plugin/loading'),
|
|
|
|
PullRefresh = require('../plugin/pull-refresh');
|
|
|
|
|
|
|
|
var $window = $(window),
|
|
|
|
$starArticle = $('.star-article'),
|
|
|
|
$headTab = $('.head-tab'),
|
|
|
|
bannerLen = $('.avatar-swiper .swiper-slide').length;
|
|
|
|
stopLoading = false,
|
|
|
|
avatarSwiper = [];
|
|
|
|
|
|
|
|
/*
|
|
|
|
$swiperView = $('.swiper-view'),
|
|
...
|
...
|
@@ -25,7 +28,7 @@ var $window = $(window), |
|
|
|
var mySwiper;
|
|
|
|
*/
|
|
|
|
|
|
|
|
var avatarSwiper, avatarKey;
|
|
|
|
var avatarKey, bannerLen;
|
|
|
|
|
|
|
|
require('../common');
|
|
|
|
|
|
...
|
...
|
@@ -34,190 +37,257 @@ ellipsis.init(); |
|
|
|
|
|
|
|
$window.on('mousewheel', false);
|
|
|
|
|
|
|
|
$(function() {
|
|
|
|
// 限制标题字数
|
|
|
|
function txtLimit(dom, item1, item2) {
|
|
|
|
var $title = dom.find(item1),
|
|
|
|
$cont = dom.find(item2);
|
|
|
|
|
|
|
|
$title[0].mlellipsis(2);
|
|
|
|
$cont[0].mlellipsis(3);
|
|
|
|
}
|
|
|
|
|
|
|
|
// 设置默认头像
|
|
|
|
function setAvatar($userAvatar) {
|
|
|
|
var myImage = new Image(),
|
|
|
|
avatar;
|
|
|
|
|
|
|
|
// 部分老用户没有头像，显示默认头像
|
|
|
|
avatar = $userAvatar.data('avatar');
|
|
|
|
myImage.src = avatar;
|
|
|
|
myImage.onload = function() {
|
|
|
|
$userAvatar.css('background-image', 'url(' + avatar + ')');
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
function ajaxHtml() {
|
|
|
|
|
|
|
|
loading.showLoadingMask();
|
|
|
|
$.ajax({
|
|
|
|
type: 'GET',
|
|
|
|
url: '/guang/star/ajaxIndexHtml',
|
|
|
|
dataType: 'html',
|
|
|
|
success: function(data) {
|
|
|
|
stopLoading = false;
|
|
|
|
|
|
|
|
if (data === '') {
|
|
|
|
stopLoading = true;
|
|
|
|
tip.show('没有更多内容了');
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.star-main').html(data);
|
|
|
|
|
|
|
|
// 限制标题字数
|
|
|
|
$('.cont-area').each(function() {
|
|
|
|
txtLimit($(this), '.title', '.cont-txt');
|
|
|
|
});
|
|
|
|
|
|
|
|
loading.hideLoadingMask();
|
|
|
|
lazyLoad($('img.lazy'));
|
|
|
|
bannerLen = $('.avatar-0 .swiper-slide').length;
|
|
|
|
|
|
|
|
setTimeout(function() {
|
|
|
|
setIndexAction();
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
},
|
|
|
|
error: function() {
|
|
|
|
tip.show('网络断开连接了~');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function setIndexAction() {
|
|
|
|
var starIScroll;
|
|
|
|
|
|
|
|
var $avatar0 = $('.avatar-0'),
|
|
|
|
$avatar1 = $('.avatar-1');
|
|
|
|
|
|
|
|
// 下拉刷新，上拉加载
|
|
|
|
starIScroll = new PullRefresh('.star-wrap', {
|
|
|
|
height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
|
|
|
|
pullDown: function() {
|
|
|
|
location.reload();
|
|
|
|
},
|
|
|
|
pullUp: function() {
|
|
|
|
// $headTab.slideUp();
|
|
|
|
if (!stopLoading) {
|
|
|
|
stopLoading = true;
|
|
|
|
ajaxHtml();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
starIScroll.iScroll.on('scrollStart', function() {
|
|
|
|
$window.trigger('scroll');
|
|
|
|
// pullUp: function() {
|
|
|
|
// // $headTab.slideUp();
|
|
|
|
// }
|
|
|
|
});
|
|
|
|
|
|
|
|
// starIScroll.iScroll.on('scroll', function() {
|
|
|
|
// var scale = 1;
|
|
|
|
//
|
|
|
|
// if (this.y < 0 && this.startY > -40) {
|
|
|
|
// console.log(headTabHeight + this.startY);
|
|
|
|
// scale = 2 / headTabHeight;
|
|
|
|
// }
|
|
|
|
// $headTab.css({
|
|
|
|
// transfrom: 'scale(' + scale + ')'
|
|
|
|
// });
|
|
|
|
// });
|
|
|
|
|
|
|
|
starIScroll.iScroll.on('scrollEnd', function() {
|
|
|
|
starIScroll.iScroll.on('scrollStart', function() {
|
|
|
|
$window.trigger('scroll');
|
|
|
|
|
|
|
|
// 上滑
|
|
|
|
if (this.directionY === 1) {
|
|
|
|
$headTab.addClass('hide-tab');
|
|
|
|
$headTab.slideUp();
|
|
|
|
} else {
|
|
|
|
$headTab.removeClass('hide-tab');
|
|
|
|
$headTab.slideDown();
|
|
|
|
}
|
|
|
|
|
|
|
|
// 下拉
|
|
|
|
if (this.directionY === -1) {
|
|
|
|
$('.fliptop').slideDown();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
// 设置默认头像
|
|
|
|
function setAvatar($userAvatar) {
|
|
|
|
var myImage = new Image(),
|
|
|
|
avatar;
|
|
|
|
starIScroll.iScroll.on('scroll', function() {
|
|
|
|
// var scale = 1;
|
|
|
|
|
|
|
|
// 部分老用户没有头像，显示默认头像
|
|
|
|
avatar = $userAvatar.data('avatar');
|
|
|
|
myImage.src = avatar;
|
|
|
|
myImage.onload = function() {
|
|
|
|
$userAvatar.css('background-image', 'url(' + avatar + ')');
|
|
|
|
};
|
|
|
|
}
|
|
|
|
// if (this.y < 0 && this.startY > -40) {
|
|
|
|
// console.log(headTabHeight + this.startY);
|
|
|
|
// scale = 2 / headTabHeight;
|
|
|
|
// }
|
|
|
|
// $headTab.css({
|
|
|
|
// transfrom: 'scale(' + scale + ')'
|
|
|
|
// });
|
|
|
|
|
|
|
|
// 限制标题字数
|
|
|
|
function txtLimit(dom) {
|
|
|
|
var $title = dom.find('.article-title'),
|
|
|
|
$cont = dom.find('p');
|
|
|
|
if (this.startY < -180) {
|
|
|
|
$avatar0.hide();
|
|
|
|
$avatar1.show();
|
|
|
|
|
|
|
|
$title[0].mlellipsis(2);
|
|
|
|
$cont[0].mlellipsis(3);
|
|
|
|
}
|
|
|
|
// avatarSwiper[1].slideTo($avatar0.find('.swiper-slide-active').index(), 1000, false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 明星动态文章图片相关操作
|
|
|
|
/*
|
|
|
|
function articleImgAction(dom, key) {
|
|
|
|
var $articeImgs = dom.find('.artice-imgs'),
|
|
|
|
$li = $articeImgs.find('li'),
|
|
|
|
imgLen = $articeImgs.find('img').length,
|
|
|
|
addFlagDom = $li.eq(2);
|
|
|
|
starIScroll.iScroll.on('scrollEnd', function() {
|
|
|
|
$window.trigger('scroll');
|
|
|
|
|
|
|
|
var i;
|
|
|
|
$('.fliptop').slideUp();
|
|
|
|
});
|
|
|
|
|
|
|
|
imgs = [];
|
|
|
|
// 明星动态文章图片相关操作
|
|
|
|
/*
|
|
|
|
function articleImgAction(dom, key) {
|
|
|
|
var $articeImgs = dom.find('.artice-imgs'),
|
|
|
|
$li = $articeImgs.find('li'),
|
|
|
|
imgLen = $articeImgs.find('img').length,
|
|
|
|
addFlagDom = $li.eq(2);
|
|
|
|
|
|
|
|
$li.each(function() {
|
|
|
|
imgs.push($(this).find('img').attr('src'));
|
|
|
|
});
|
|
|
|
var i;
|
|
|
|
|
|
|
|
allImgs[key] = imgs;
|
|
|
|
imgs = [];
|
|
|
|
|
|
|
|
$li.on('click', function() {
|
|
|
|
for (i = 0; i < imgLen; i++) {
|
|
|
|
$swiperView.find('ul').append('<li class="swiper-slide">' +
|
|
|
|
'<img class="swiper-lazy" data-src="' + allImgs[key][i] + '">' +
|
|
|
|
'<div class="swiper-lazy-preloader"></div></li>');
|
|
|
|
}
|
|
|
|
setTimeout(function() {
|
|
|
|
mySwiper = new Swiper('.swiper-view', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
slideElement: 'li'
|
|
|
|
});
|
|
|
|
$li.each(function() {
|
|
|
|
imgs.push($(this).find('img').attr('src'));
|
|
|
|
});
|
|
|
|
|
|
|
|
$('.swiper-view li').on('click', function(e) {
|
|
|
|
if (e.target.nodeName === 'IMG') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$viewImg.hide();
|
|
|
|
$body.css({
|
|
|
|
overflow: 'auto'
|
|
|
|
allImgs[key] = imgs;
|
|
|
|
|
|
|
|
$li.on('click', function() {
|
|
|
|
for (i = 0; i < imgLen; i++) {
|
|
|
|
$swiperView.find('ul').append('<li class="swiper-slide">' +
|
|
|
|
'<img class="swiper-lazy" data-src="' + allImgs[key][i] + '">' +
|
|
|
|
'<div class="swiper-lazy-preloader"></div></li>');
|
|
|
|
}
|
|
|
|
setTimeout(function() {
|
|
|
|
mySwiper = new Swiper('.swiper-view', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
slideElement: 'li'
|
|
|
|
});
|
|
|
|
$viewImg.find('li').remove();
|
|
|
|
mySwiper.destroy(false);
|
|
|
|
});
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
$viewImg.show();
|
|
|
|
$('.swiper-view li').on('click', function(e) {
|
|
|
|
if (e.target.nodeName === 'IMG') {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$viewImg.hide();
|
|
|
|
$body.css({
|
|
|
|
overflow: 'auto'
|
|
|
|
});
|
|
|
|
$viewImg.find('li').remove();
|
|
|
|
mySwiper.destroy(false);
|
|
|
|
});
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
$viewImg.show();
|
|
|
|
|
|
|
|
$body.css({
|
|
|
|
overflow: 'hidden'
|
|
|
|
$body.css({
|
|
|
|
overflow: 'hidden'
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
|
|
|
|
addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
|
|
|
|
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
|
|
|
|
addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
|
|
|
// banner swiper 初始化
|
|
|
|
if ($('.banner-swiper').find('li').length > 1) {
|
|
|
|
new Swiper('.banner-swiper', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
|
|
autoplayDisableOnInteraction: false,
|
|
|
|
paginationClickable: true,
|
|
|
|
slideElement: 'li',
|
|
|
|
pagination: '.banner-top .pagination-inner'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
|
|
|
// banner swiper 初始化
|
|
|
|
if (bannerLen > 1) {
|
|
|
|
new Swiper('.banner-swiper', {
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 3000,
|
|
|
|
autoplayDisableOnInteraction: false,
|
|
|
|
paginationClickable: true,
|
|
|
|
slideElement: 'li',
|
|
|
|
pagination: '.banner-top .pagination-inner'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
// 明星头像 swiper 初始化
|
|
|
|
if (bannerLen > 1) {
|
|
|
|
$('.avatar-swiper').each(function(key, item) {
|
|
|
|
avatarSwiper[key] = new Swiper('.avatar-' + key, {
|
|
|
|
loop: true,
|
|
|
|
loopedSlides: bannerLen,
|
|
|
|
initialSlide: 3,
|
|
|
|
centeredSlides: true,
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
slidesOffsetBefore: '-' + $(item).find('li').not('.swiper-slide-visible').width() / 2,
|
|
|
|
watchSlidesProgress: true,
|
|
|
|
watchSlidesVisibility: true,
|
|
|
|
observer: true,
|
|
|
|
observeParents: true
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
avatarSwiper[0].params.control = avatarSwiper[1];// 需要在Swiper2初始化后，Swiper1控制Swiper2
|
|
|
|
avatarSwiper[1].params.control = avatarSwiper[0];// 需要在Swiper1初始化后，Swiper2控制Swiper1
|
|
|
|
|
|
|
|
// 明星动态头像左右滑动
|
|
|
|
if ($('.article-avatar-swiper').find('li').length > 1) {
|
|
|
|
new Swiper('.article-avatar-swiper', {
|
|
|
|
initialSlide: 0,
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 5000
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 明星头像 swiper 初始化
|
|
|
|
if ($('.avatar-swiper .swiper-slide').length > 1) {
|
|
|
|
avatarSwiper = new Swiper('.avatar-swiper', {
|
|
|
|
loop: true,
|
|
|
|
loopedSlides: bannerLen,
|
|
|
|
initialSlide: 3,
|
|
|
|
centeredSlides: true,
|
|
|
|
slidesPerView: 'auto',
|
|
|
|
slidesOffsetBefore: '-' + $('.avatar-swiper').find('li').not('.swiper-slide-visible').width() / 2,
|
|
|
|
watchSlidesProgress: true,
|
|
|
|
watchSlidesVisibility: true
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
// 明星动态头像左右滑动
|
|
|
|
if ($('.article-avatar-swiper').find('li').length > 1) {
|
|
|
|
new Swiper('.article-avatar-swiper', {
|
|
|
|
initialSlide: 0,
|
|
|
|
lazyLoading: true,
|
|
|
|
lazyLoadingInPrevNext: true,
|
|
|
|
loop: true,
|
|
|
|
autoplay: 5000
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if ($('.star-info').find('li').length > 0) {
|
|
|
|
$starArticle.each(function(key, item) {
|
|
|
|
txtLimit($(item), '.article-title', 'p');
|
|
|
|
|
|
|
|
// articleImgAction($(item), key);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
if ($('.star-info').find('li').length > 0) {
|
|
|
|
$starArticle.each(function(key, item) {
|
|
|
|
txtLimit($(item));
|
|
|
|
|
|
|
|
// articleImgAction($(item), key);
|
|
|
|
// 明星头像点击居中显示或跳转
|
|
|
|
$('.avatar-swiper li').on('click', function() {
|
|
|
|
if ($(this).hasClass('swiper-slide-active')) {
|
|
|
|
location.href = $(this).find('img').data('url');
|
|
|
|
} else {
|
|
|
|
avatarKey = $(this).index();
|
|
|
|
avatarSwiper[0].slideTo(avatarKey, 1000, false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 明星头像点击居中显示或跳转
|
|
|
|
$('.avatar-swiper li').on('click', function() {
|
|
|
|
if ($(this).hasClass('swiper-slide-active')) {
|
|
|
|
location.href = $(this).find('img').data('url');
|
|
|
|
} else {
|
|
|
|
avatarKey = $(this).index();
|
|
|
|
avatarSwiper.slideTo(avatarKey, 1000, false);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
$('.rank-avatar').each(function(key, item) {
|
|
|
|
if ($(item).attr('data-avatar') !== '') {
|
|
|
|
setAvatar($(item));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
$('.rank-avatar').each(function(key, item) {
|
|
|
|
if ($(item).attr('data-avatar') !== '') {
|
|
|
|
setAvatar($(item));
|
|
|
|
}
|
|
|
|
}); |
|
|
|
ajaxHtml(); |
...
|
...
|
|
