|
@@ -6,14 +6,17 @@ |
|
@@ -6,14 +6,17 @@ |
|
6
|
|
6
|
|
|
7
|
var $ = require('yoho-jquery'),
|
7
|
var $ = require('yoho-jquery'),
|
|
8
|
Swiper = require('yoho-swiper'),
|
8
|
Swiper = require('yoho-swiper'),
|
|
|
|
9
|
+ tip = require('../plugin/tip'),
|
|
9
|
lazyLoad = require('yoho-jquery-lazyload'),
|
10
|
lazyLoad = require('yoho-jquery-lazyload'),
|
|
10
|
ellipsis = require('yoho-mlellipsis'),
|
11
|
ellipsis = require('yoho-mlellipsis'),
|
|
|
|
12
|
+ loading = require('../plugin/loading'),
|
|
11
|
PullRefresh = require('../plugin/pull-refresh');
|
13
|
PullRefresh = require('../plugin/pull-refresh');
|
|
12
|
|
14
|
|
|
13
|
var $window = $(window),
|
15
|
var $window = $(window),
|
|
14
|
$starArticle = $('.star-article'),
|
16
|
$starArticle = $('.star-article'),
|
|
15
|
$headTab = $('.head-tab'),
|
17
|
$headTab = $('.head-tab'),
|
|
16
|
- bannerLen = $('.avatar-swiper .swiper-slide').length;
|
18
|
+ stopLoading = false,
|
|
|
|
19
|
+ avatarSwiper = [];
|
|
17
|
|
20
|
|
|
18
|
/*
|
21
|
/*
|
|
19
|
$swiperView = $('.swiper-view'),
|
22
|
$swiperView = $('.swiper-view'),
|
|
@@ -25,7 +28,7 @@ var $window = $(window), |
|
@@ -25,7 +28,7 @@ var $window = $(window), |
|
25
|
var mySwiper;
|
28
|
var mySwiper;
|
|
26
|
*/
|
29
|
*/
|
|
27
|
|
30
|
|
|
28
|
-var avatarSwiper, avatarKey;
|
31
|
+var avatarKey, bannerLen;
|
|
29
|
|
32
|
|
|
30
|
require('../common');
|
33
|
require('../common');
|
|
31
|
|
34
|
|
|
@@ -34,27 +37,105 @@ ellipsis.init(); |
|
@@ -34,27 +37,105 @@ ellipsis.init(); |
|
34
|
|
37
|
|
|
35
|
$window.on('mousewheel', false);
|
38
|
$window.on('mousewheel', false);
|
|
36
|
|
39
|
|
|
37
|
-$(function() {
|
40
|
+// 限制标题字数
|
|
|
|
41
|
+function txtLimit(dom, item1, item2) {
|
|
|
|
42
|
+ var $title = dom.find(item1),
|
|
|
|
43
|
+ $cont = dom.find(item2);
|
|
|
|
44
|
+
|
|
|
|
45
|
+ $title[0].mlellipsis(2);
|
|
|
|
46
|
+ $cont[0].mlellipsis(3);
|
|
|
|
47
|
+}
|
|
|
|
48
|
+
|
|
|
|
49
|
+// 设置默认头像
|
|
|
|
50
|
+function setAvatar($userAvatar) {
|
|
|
|
51
|
+ var myImage = new Image(),
|
|
|
|
52
|
+ avatar;
|
|
|
|
53
|
+
|
|
|
|
54
|
+ // 部分老用户没有头像，显示默认头像
|
|
|
|
55
|
+ avatar = $userAvatar.data('avatar');
|
|
|
|
56
|
+ myImage.src = avatar;
|
|
|
|
57
|
+ myImage.onload = function() {
|
|
|
|
58
|
+ $userAvatar.css('background-image', 'url(' + avatar + ')');
|
|
|
|
59
|
+ };
|
|
|
|
60
|
+}
|
|
|
|
61
|
+
|
|
|
|
62
|
+function ajaxHtml() {
|
|
|
|
63
|
+
|
|
|
|
64
|
+ loading.showLoadingMask();
|
|
|
|
65
|
+ $.ajax({
|
|
|
|
66
|
+ type: 'GET',
|
|
|
|
67
|
+ url: '/guang/star/ajaxIndexHtml',
|
|
|
|
68
|
+ dataType: 'html',
|
|
|
|
69
|
+ success: function(data) {
|
|
|
|
70
|
+ stopLoading = false;
|
|
|
|
71
|
+
|
|
|
|
72
|
+ if (data === '') {
|
|
|
|
73
|
+ stopLoading = true;
|
|
|
|
74
|
+ tip.show('没有更多内容了');
|
|
|
|
75
|
+ }
|
|
|
|
76
|
+
|
|
|
|
77
|
+ $('.star-main').html(data);
|
|
|
|
78
|
+
|
|
|
|
79
|
+ // 限制标题字数
|
|
|
|
80
|
+ $('.cont-area').each(function() {
|
|
|
|
81
|
+ txtLimit($(this), '.title', '.cont-txt');
|
|
|
|
82
|
+ });
|
|
|
|
83
|
+
|
|
|
|
84
|
+ loading.hideLoadingMask();
|
|
|
|
85
|
+ lazyLoad($('img.lazy'));
|
|
|
|
86
|
+ bannerLen = $('.avatar-0 .swiper-slide').length;
|
|
|
|
87
|
+
|
|
|
|
88
|
+ setTimeout(function() {
|
|
|
|
89
|
+ setIndexAction();
|
|
|
|
90
|
+ }, 100);
|
|
|
|
91
|
+
|
|
|
|
92
|
+ },
|
|
|
|
93
|
+ error: function() {
|
|
|
|
94
|
+ tip.show('网络断开连接了~');
|
|
|
|
95
|
+ }
|
|
|
|
96
|
+ });
|
|
|
|
97
|
+}
|
|
|
|
98
|
+
|
|
|
|
99
|
+function setIndexAction() {
|
|
38
|
var starIScroll;
|
100
|
var starIScroll;
|
|
39
|
|
101
|
|
|
|
|
102
|
+ var $avatar0 = $('.avatar-0'),
|
|
|
|
103
|
+ $avatar1 = $('.avatar-1');
|
|
|
|
104
|
+
|
|
40
|
// 下拉刷新，上拉加载
|
105
|
// 下拉刷新，上拉加载
|
|
41
|
starIScroll = new PullRefresh('.star-wrap', {
|
106
|
starIScroll = new PullRefresh('.star-wrap', {
|
|
42
|
height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
|
107
|
height: $(window).height() - $('#yoho-header').height() - $('.head-tab').height(),
|
|
43
|
pullDown: function() {
|
108
|
pullDown: function() {
|
|
44
|
- location.reload();
|
|
|
|
45
|
- },
|
|
|
|
46
|
- pullUp: function() {
|
|
|
|
47
|
- // $headTab.slideUp();
|
109
|
+ if (!stopLoading) {
|
|
|
|
110
|
+ stopLoading = true;
|
|
|
|
111
|
+ ajaxHtml();
|
|
|
|
112
|
+ }
|
|
48
|
}
|
113
|
}
|
|
|
|
114
|
+
|
|
|
|
115
|
+ // pullUp: function() {
|
|
|
|
116
|
+ // // $headTab.slideUp();
|
|
|
|
117
|
+ // }
|
|
49
|
});
|
118
|
});
|
|
50
|
|
119
|
|
|
51
|
starIScroll.iScroll.on('scrollStart', function() {
|
120
|
starIScroll.iScroll.on('scrollStart', function() {
|
|
52
|
$window.trigger('scroll');
|
121
|
$window.trigger('scroll');
|
|
|
|
122
|
+
|
|
|
|
123
|
+ // 上滑
|
|
|
|
124
|
+ if (this.directionY === 1) {
|
|
|
|
125
|
+ $headTab.slideUp();
|
|
|
|
126
|
+ } else {
|
|
|
|
127
|
+ $headTab.slideDown();
|
|
|
|
128
|
+ }
|
|
|
|
129
|
+
|
|
|
|
130
|
+ // 下拉
|
|
|
|
131
|
+ if (this.directionY === -1) {
|
|
|
|
132
|
+ $('.fliptop').slideDown();
|
|
|
|
133
|
+ }
|
|
53
|
});
|
134
|
});
|
|
54
|
|
135
|
|
|
55
|
- // starIScroll.iScroll.on('scroll', function() {
|
136
|
+ starIScroll.iScroll.on('scroll', function() {
|
|
56
|
// var scale = 1;
|
137
|
// var scale = 1;
|
|
57
|
- //
|
138
|
+
|
|
58
|
// if (this.y < 0 && this.startY > -40) {
|
139
|
// if (this.y < 0 && this.startY > -40) {
|
|
59
|
// console.log(headTabHeight + this.startY);
|
140
|
// console.log(headTabHeight + this.startY);
|
|
60
|
// scale = 2 / headTabHeight;
|
141
|
// scale = 2 / headTabHeight;
|
|
@@ -62,45 +143,24 @@ $(function() { |
|
@@ -62,45 +143,24 @@ $(function() { |
|
62
|
// $headTab.css({
|
143
|
// $headTab.css({
|
|
63
|
// transfrom: 'scale(' + scale + ')'
|
144
|
// transfrom: 'scale(' + scale + ')'
|
|
64
|
// });
|
145
|
// });
|
|
65
|
- // });
|
|
|
|
66
|
|
146
|
|
|
67
|
- starIScroll.iScroll.on('scrollEnd', function() {
|
|
|
|
68
|
- $window.trigger('scroll');
|
147
|
+ if (this.startY < -180) {
|
|
|
|
148
|
+ $avatar0.hide();
|
|
|
|
149
|
+ $avatar1.show();
|
|
69
|
|
150
|
|
|
70
|
- // 上滑
|
|
|
|
71
|
- if (this.directionY === 1) {
|
|
|
|
72
|
- $headTab.addClass('hide-tab');
|
|
|
|
73
|
- } else {
|
|
|
|
74
|
- $headTab.removeClass('hide-tab');
|
151
|
+ // avatarSwiper[1].slideTo($avatar0.find('.swiper-slide-active').index(), 1000, false);
|
|
75
|
}
|
152
|
}
|
|
76
|
});
|
153
|
});
|
|
77
|
-});
|
|
|
|
78
|
-
|
|
|
|
79
|
-// 设置默认头像
|
|
|
|
80
|
-function setAvatar($userAvatar) {
|
|
|
|
81
|
- var myImage = new Image(),
|
|
|
|
82
|
- avatar;
|
|
|
|
83
|
-
|
|
|
|
84
|
- // 部分老用户没有头像，显示默认头像
|
|
|
|
85
|
- avatar = $userAvatar.data('avatar');
|
|
|
|
86
|
- myImage.src = avatar;
|
|
|
|
87
|
- myImage.onload = function() {
|
|
|
|
88
|
- $userAvatar.css('background-image', 'url(' + avatar + ')');
|
|
|
|
89
|
- };
|
|
|
|
90
|
-}
|
|
|
|
91
|
|
154
|
|
|
92
|
-// 限制标题字数
|
|
|
|
93
|
-function txtLimit(dom) {
|
|
|
|
94
|
- var $title = dom.find('.article-title'),
|
|
|
|
95
|
- $cont = dom.find('p');
|
155
|
+ starIScroll.iScroll.on('scrollEnd', function() {
|
|
|
|
156
|
+ $window.trigger('scroll');
|
|
96
|
|
157
|
|
|
97
|
- $title[0].mlellipsis(2);
|
|
|
|
98
|
- $cont[0].mlellipsis(3);
|
|
|
|
99
|
-}
|
158
|
+ $('.fliptop').slideUp();
|
|
|
|
159
|
+ });
|
|
100
|
|
160
|
|
|
101
|
-// 明星动态文章图片相关操作
|
|
|
|
102
|
-/*
|
|
|
|
103
|
-function articleImgAction(dom, key) {
|
161
|
+ // 明星动态文章图片相关操作
|
|
|
|
162
|
+ /*
|
|
|
|
163
|
+ function articleImgAction(dom, key) {
|
|
104
|
var $articeImgs = dom.find('.artice-imgs'),
|
164
|
var $articeImgs = dom.find('.artice-imgs'),
|
|
105
|
$li = $articeImgs.find('li'),
|
165
|
$li = $articeImgs.find('li'),
|
|
106
|
imgLen = $articeImgs.find('img').length,
|
166
|
imgLen = $articeImgs.find('img').length,
|
|
@@ -152,11 +212,11 @@ function articleImgAction(dom, key) { |
|
@@ -152,11 +212,11 @@ function articleImgAction(dom, key) { |
|
152
|
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
|
212
|
if (imgLen > 3 && addFlagDom.find('.img-size').length < 1) {
|
|
153
|
addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
|
213
|
addFlagDom.append('<div class="img-size"><i class="pic-icon"></i>' + imgLen + '</div>');
|
|
154
|
}
|
214
|
}
|
|
155
|
-}
|
|
|
|
156
|
-*/
|
215
|
+ }
|
|
|
|
216
|
+ */
|
|
157
|
|
217
|
|
|
158
|
-// banner swiper 初始化
|
|
|
|
159
|
-if (bannerLen > 1) {
|
218
|
+ // banner swiper 初始化
|
|
|
|
219
|
+ if ($('.banner-swiper').find('li').length > 1) {
|
|
160
|
new Swiper('.banner-swiper', {
|
220
|
new Swiper('.banner-swiper', {
|
|
161
|
lazyLoading: true,
|
221
|
lazyLoading: true,
|
|
162
|
lazyLoadingInPrevNext: true,
|
222
|
lazyLoadingInPrevNext: true,
|
|
@@ -167,25 +227,31 @@ if (bannerLen > 1) { |
|
@@ -167,25 +227,31 @@ if (bannerLen > 1) { |
|
167
|
slideElement: 'li',
|
227
|
slideElement: 'li',
|
|
168
|
pagination: '.banner-top .pagination-inner'
|
228
|
pagination: '.banner-top .pagination-inner'
|
|
169
|
});
|
229
|
});
|
|
170
|
-}
|
|
|
|
171
|
-
|
230
|
+ }
|
|
172
|
|
231
|
|
|
173
|
-// 明星头像 swiper 初始化
|
|
|
|
174
|
-if ($('.avatar-swiper .swiper-slide').length > 1) {
|
|
|
|
175
|
- avatarSwiper = new Swiper('.avatar-swiper', {
|
232
|
+ // 明星头像 swiper 初始化
|
|
|
|
233
|
+ if (bannerLen > 1) {
|
|
|
|
234
|
+ $('.avatar-swiper').each(function(key, item) {
|
|
|
|
235
|
+ avatarSwiper[key] = new Swiper('.avatar-' + key, {
|
|
176
|
loop: true,
|
236
|
loop: true,
|
|
177
|
loopedSlides: bannerLen,
|
237
|
loopedSlides: bannerLen,
|
|
178
|
initialSlide: 3,
|
238
|
initialSlide: 3,
|
|
179
|
centeredSlides: true,
|
239
|
centeredSlides: true,
|
|
180
|
slidesPerView: 'auto',
|
240
|
slidesPerView: 'auto',
|
|
181
|
- slidesOffsetBefore: '-' + $('.avatar-swiper').find('li').not('.swiper-slide-visible').width() / 2,
|
241
|
+ slidesOffsetBefore: '-' + $(item).find('li').not('.swiper-slide-visible').width() / 2,
|
|
182
|
watchSlidesProgress: true,
|
242
|
watchSlidesProgress: true,
|
|
183
|
- watchSlidesVisibility: true
|
243
|
+ watchSlidesVisibility: true,
|
|
|
|
244
|
+ observer: true,
|
|
|
|
245
|
+ observeParents: true
|
|
184
|
});
|
246
|
});
|
|
185
|
-}
|
247
|
+ });
|
|
|
|
248
|
+ }
|
|
|
|
249
|
+
|
|
|
|
250
|
+ avatarSwiper[0].params.control = avatarSwiper[1];// 需要在Swiper2初始化后，Swiper1控制Swiper2
|
|
|
|
251
|
+ avatarSwiper[1].params.control = avatarSwiper[0];// 需要在Swiper1初始化后，Swiper2控制Swiper1
|
|
186
|
|
252
|
|
|
187
|
-// 明星动态头像左右滑动
|
|
|
|
188
|
-if ($('.article-avatar-swiper').find('li').length > 1) {
|
253
|
+ // 明星动态头像左右滑动
|
|
|
|
254
|
+ if ($('.article-avatar-swiper').find('li').length > 1) {
|
|
189
|
new Swiper('.article-avatar-swiper', {
|
255
|
new Swiper('.article-avatar-swiper', {
|
|
190
|
initialSlide: 0,
|
256
|
initialSlide: 0,
|
|
191
|
lazyLoading: true,
|
257
|
lazyLoading: true,
|
|
@@ -193,31 +259,35 @@ if ($('.article-avatar-swiper').find('li').length > 1) { |
|
@@ -193,31 +259,35 @@ if ($('.article-avatar-swiper').find('li').length > 1) { |
|
193
|
loop: true,
|
259
|
loop: true,
|
|
194
|
autoplay: 5000
|
260
|
autoplay: 5000
|
|
195
|
});
|
261
|
});
|
|
196
|
-}
|
262
|
+ }
|
|
197
|
|
263
|
|
|
198
|
|
264
|
|
|
199
|
-if ($('.star-info').find('li').length > 0) {
|
265
|
+ if ($('.star-info').find('li').length > 0) {
|
|
200
|
$starArticle.each(function(key, item) {
|
266
|
$starArticle.each(function(key, item) {
|
|
201
|
- txtLimit($(item));
|
267
|
+ txtLimit($(item), '.article-title', 'p');
|
|
202
|
|
268
|
|
|
203
|
// articleImgAction($(item), key);
|
269
|
// articleImgAction($(item), key);
|
|
204
|
});
|
270
|
});
|
|
205
|
-}
|
271
|
+ }
|
|
206
|
|
272
|
|
|
207
|
|
273
|
|
|
208
|
-// 明星头像点击居中显示或跳转
|
|
|
|
209
|
-$('.avatar-swiper li').on('click', function() {
|
274
|
+ // 明星头像点击居中显示或跳转
|
|
|
|
275
|
+ $('.avatar-swiper li').on('click', function() {
|
|
210
|
if ($(this).hasClass('swiper-slide-active')) {
|
276
|
if ($(this).hasClass('swiper-slide-active')) {
|
|
211
|
location.href = $(this).find('img').data('url');
|
277
|
location.href = $(this).find('img').data('url');
|
|
212
|
} else {
|
278
|
} else {
|
|
213
|
avatarKey = $(this).index();
|
279
|
avatarKey = $(this).index();
|
|
214
|
- avatarSwiper.slideTo(avatarKey, 1000, false);
|
280
|
+ avatarSwiper[0].slideTo(avatarKey, 1000, false);
|
|
215
|
}
|
281
|
}
|
|
216
|
-});
|
282
|
+ });
|
|
217
|
|
283
|
|
|
218
|
|
284
|
|
|
219
|
-$('.rank-avatar').each(function(key, item) {
|
285
|
+ $('.rank-avatar').each(function(key, item) {
|
|
220
|
if ($(item).attr('data-avatar') !== '') {
|
286
|
if ($(item).attr('data-avatar') !== '') {
|
|
221
|
setAvatar($(item));
|
287
|
setAvatar($(item));
|
|
222
|
}
|
288
|
}
|
|
223
|
-}); |
289
|
+ });
|
|
|
|
290
|
+
|
|
|
|
291
|
+}
|
|
|
|
292
|
+
|
|
|
|
293
|
+ajaxHtml(); |
