|
@@ -6,7 +6,97 @@ |
|
@@ -6,7 +6,97 @@ |
|
6
|
|
6
|
|
|
7
|
var $ = require('yoho.zepto'),
|
7
|
var $ = require('yoho.zepto'),
|
|
8
|
ellipsis = require('mlellipsis'),
|
8
|
ellipsis = require('mlellipsis'),
|
|
9
|
- lazyLoad = require('yoho.lazyload');
|
9
|
+ lazyLoad = require('yoho.lazyload'),
|
|
|
|
10
|
+ IScroll = require('iscroll/iscroll-probe');
|
|
|
|
11
|
+
|
|
|
|
12
|
+var $authorIntro = $('.author .intro');
|
|
|
|
13
|
+
|
|
|
|
14
|
+var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;
|
|
|
|
15
|
+
|
|
|
|
16
|
+var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;
|
|
|
|
17
|
+
|
|
|
|
18
|
+//collocation block variable
|
|
|
|
19
|
+var thumbWidth = 0,
|
|
|
|
20
|
+ $fixedThumbContainer = $(''),
|
|
|
|
21
|
+ $coBlock, $thumbContainer, $thumbs, $prods,
|
|
|
|
22
|
+ scrollToEl;
|
|
|
|
23
|
+
|
|
|
|
24
|
+var scrollToEl = document.querySelector('#wrapper .collocation-block');
|
|
|
|
25
|
+
|
|
|
|
26
|
+var winW = $(window).width();
|
|
|
|
27
|
+
|
|
|
|
28
|
+var myScroll;
|
|
|
|
29
|
+
|
|
|
|
30
|
+/**
|
|
|
|
31
|
+ * 计算搭配的箭头的位置
|
|
|
|
32
|
+ * @param $curPos 当前focus的搭配项
|
|
|
|
33
|
+ */
|
|
|
|
34
|
+function posCollocationArrow($curCo) {
|
|
|
|
35
|
+ var left = $curCo.offset().left,
|
|
|
|
36
|
+ bgPos = -winW + left + (thumbWidth / 2) + 'px';
|
|
|
|
37
|
+
|
|
|
|
38
|
+ $thumbContainer.css({
|
|
|
|
39
|
+ backgroundPosition: bgPos + ' bottom'
|
|
|
|
40
|
+ });
|
|
|
|
41
|
+
|
|
|
|
42
|
+ if (isIphone) {
|
|
|
|
43
|
+ $fixedThumbContainer.css({
|
|
|
|
44
|
+ backgroundPosition: bgPos + ' bottom'
|
|
|
|
45
|
+ });
|
|
|
|
46
|
+ }
|
|
|
|
47
|
+}
|
|
|
|
48
|
+
|
|
|
|
49
|
+//搭配thumb的touch事件句柄
|
|
|
|
50
|
+function thumbTouchEvt(e) {
|
|
|
|
51
|
+ var $curCo = $(e.currentTarget),
|
|
|
|
52
|
+ index = $curCo.index(),
|
|
|
|
53
|
+ $brother, $brotherCo,
|
|
|
|
54
|
+ $curProds;
|
|
|
|
55
|
+
|
|
|
|
56
|
+ if ($curCo.hasClass('focus')) {
|
|
|
|
57
|
+ return;
|
|
|
|
58
|
+ }
|
|
|
|
59
|
+
|
|
|
|
60
|
+ $thumbs.filter('.focus').removeClass('focus');
|
|
|
|
61
|
+
|
|
|
|
62
|
+ if (isIphone) {
|
|
|
|
63
|
+ if ($curCo.closest('.fixed-thumb-container').length > 0) {
|
|
|
|
64
|
+ $brother = $thumbContainer;
|
|
|
|
65
|
+ } else {
|
|
|
|
66
|
+ $brother = $fixedThumbContainer;
|
|
|
|
67
|
+ }
|
|
|
|
68
|
+
|
|
|
|
69
|
+ $brotherCo = $brother.find('.thumb').eq(index);
|
|
|
|
70
|
+ $fixedThumbContainer.find('.thumb.focus').removeClass('focus');
|
|
|
|
71
|
+ $brotherCo.addClass('focus');
|
|
|
|
72
|
+ }
|
|
|
|
73
|
+
|
|
|
|
74
|
+ $curCo.addClass('focus');
|
|
|
|
75
|
+
|
|
|
|
76
|
+ //定位arrow
|
|
|
|
77
|
+ posCollocationArrow($curCo);
|
|
|
|
78
|
+
|
|
|
|
79
|
+ $prods.not('.hide').addClass('hide');
|
|
|
|
80
|
+ $curProds = $prods.eq(index);
|
|
|
|
81
|
+ $curProds.removeClass('hide');
|
|
|
|
82
|
+
|
|
|
|
83
|
+ //
|
|
|
|
84
|
+ lazyLoad($curProds.find('.lazy'));
|
|
|
|
85
|
+
|
|
|
|
86
|
+ if (isIphone) {
|
|
|
|
87
|
+ if (myScroll) {
|
|
|
|
88
|
+ myScroll.scrollToElement(scrollToEl, 400);
|
|
|
|
89
|
+ }
|
|
|
|
90
|
+ } else {
|
|
|
|
91
|
+ $('body').animate({
|
|
|
|
92
|
+ scrollTop: $coBlock.offset().top
|
|
|
|
93
|
+ }, 400);
|
|
|
|
94
|
+ }
|
|
|
|
95
|
+}
|
|
|
|
96
|
+
|
|
|
|
97
|
+if (isIphone) {
|
|
|
|
98
|
+ $('#wrapper').addClass('ios');
|
|
|
|
99
|
+}
|
|
10
|
|
100
|
|
|
11
|
ellipsis.init();
|
101
|
ellipsis.init();
|
|
12
|
|
102
|
|
|
@@ -16,3 +106,113 @@ lazyLoad($('.lazy')); |
|
@@ -16,3 +106,113 @@ lazyLoad($('.lazy')); |
|
16
|
$('.info-list .title, .one-good .reco-name').each(function() {
|
106
|
$('.info-list .title, .one-good .reco-name').each(function() {
|
|
17
|
this.mlellipsis(2);
|
107
|
this.mlellipsis(2);
|
|
18
|
});
|
108
|
});
|
|
|
|
109
|
+
|
|
|
|
110
|
+//offset.left约等于marginLeft的值则表示介绍被换行，则清除intro的paddingTop让其更靠近头像和作者名
|
|
|
|
111
|
+if (parseInt($authorIntro.offset().left, 10) === parseInt($authorIntro.css('margin-left'), 10)) {
|
|
|
|
112
|
+ $authorIntro.css('padding-top', 0);
|
|
|
|
113
|
+}
|
|
|
|
114
|
+
|
|
|
|
115
|
+//有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
|
|
|
|
116
|
+if (hasCollocationBlock) {
|
|
|
|
117
|
+ $coBlock = $('.collocation-block');
|
|
|
|
118
|
+ $thumbContainer = $coBlock.children('.thumb-container');
|
|
|
|
119
|
+ $thumbs = $thumbContainer.find('li');
|
|
|
|
120
|
+ $prods = $coBlock.find('.prod');
|
|
|
|
121
|
+
|
|
|
|
122
|
+ thumbWidth = $thumbs.width();
|
|
|
|
123
|
+
|
|
|
|
124
|
+ if (isIphone) {
|
|
|
|
125
|
+ $fixedThumbContainer = $('#wrapper')
|
|
|
|
126
|
+ .after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))
|
|
|
|
127
|
+ .next('.thumb-container');
|
|
|
|
128
|
+
|
|
|
|
129
|
+ //load img of fixed thumb container
|
|
|
|
130
|
+ lazyLoad($fixedThumbContainer.find('.lazy'), {
|
|
|
|
131
|
+ event: 'sporty'
|
|
|
|
132
|
+ });
|
|
|
|
133
|
+ }
|
|
|
|
134
|
+
|
|
|
|
135
|
+ //Init Arrow Position
|
|
|
|
136
|
+ posCollocationArrow($thumbs.filter('.focus'));
|
|
|
|
137
|
+
|
|
|
|
138
|
+ $thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
|
|
|
|
139
|
+
|
|
|
|
140
|
+ if (isIphone) {
|
|
|
|
141
|
+ $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
|
|
|
|
142
|
+ }
|
|
|
|
143
|
+}
|
|
|
|
144
|
+
|
|
|
|
145
|
+// 初始化iscroll
|
|
|
|
146
|
+window.onload = function() {
|
|
|
|
147
|
+ var $scroller = $('#scroller');
|
|
|
|
148
|
+
|
|
|
|
149
|
+ var winH, tcH, cbH, cbTop, fixedThumbDom;
|
|
|
|
150
|
+
|
|
|
|
151
|
+ if (!isIphone) {
|
|
|
|
152
|
+ return;
|
|
|
|
153
|
+ }
|
|
|
|
154
|
+
|
|
|
|
155
|
+ myScroll = new IScroll('#wrapper', {
|
|
|
|
156
|
+ probeType: 3,
|
|
|
|
157
|
+ mouseWheel: true,
|
|
|
|
158
|
+ click: true
|
|
|
|
159
|
+ });
|
|
|
|
160
|
+
|
|
|
|
161
|
+ document.addEventListener('touchmove', function (e) {
|
|
|
|
162
|
+ e.preventDefault();
|
|
|
|
163
|
+ }, false);
|
|
|
|
164
|
+
|
|
|
|
165
|
+ if (!hasCollocationBlock) {
|
|
|
|
166
|
+ myScroll.on('scroll', function() {
|
|
|
|
167
|
+ $scroller.trigger('scroll');
|
|
|
|
168
|
+ });
|
|
|
|
169
|
+ return;
|
|
|
|
170
|
+ }
|
|
|
|
171
|
+
|
|
|
|
172
|
+ winH = $(window).height();
|
|
|
|
173
|
+ fixedThumbDom = $fixedThumbContainer[0];
|
|
|
|
174
|
+
|
|
|
|
175
|
+ tcH = $thumbContainer.height();
|
|
|
|
176
|
+ cbH = $coBlock.height();
|
|
|
|
177
|
+ cbTop = $coBlock.offset().top;
|
|
|
|
178
|
+
|
|
|
|
179
|
+ myScroll.on('scroll', function() {
|
|
|
|
180
|
+ var sTop = -this.y;
|
|
|
|
181
|
+ var classList = fixedThumbDom.className;
|
|
|
|
182
|
+
|
|
|
|
183
|
+ if (sTop <= cbTop - winH + tcH) {
|
|
|
|
184
|
+ if (classList.indexOf('fixed-bottom') === -1) {
|
|
|
|
185
|
+ $fixedThumbContainer
|
|
|
|
186
|
+ .addClass('fixed-bottom')
|
|
|
|
187
|
+ .removeClass('hide');
|
|
|
|
188
|
+ }
|
|
|
|
189
|
+ } else if (sTop <= cbTop) {
|
|
|
|
190
|
+ if (classList.indexOf('hide') === -1) {
|
|
|
|
191
|
+ $fixedThumbContainer
|
|
|
|
192
|
+ .addClass('hide')
|
|
|
|
193
|
+ .removeClass('fixed-bottom fixed-top');
|
|
|
|
194
|
+ }
|
|
|
|
195
|
+ } else if (sTop <= cbTop + cbH - tcH) {
|
|
|
|
196
|
+ if (classList.indexOf('fixed-top') === -1) {
|
|
|
|
197
|
+ $fixedThumbContainer
|
|
|
|
198
|
+ .addClass('fixed-top')
|
|
|
|
199
|
+ .removeClass('hide absolute')
|
|
|
|
200
|
+ .css('top', '');
|
|
|
|
201
|
+ }
|
|
|
|
202
|
+ } else if (sTop <= cbTop + cbH) {
|
|
|
|
203
|
+ if (classList.indexOf('absolute') === -1) {
|
|
|
|
204
|
+ $fixedThumbContainer
|
|
|
|
205
|
+ .addClass('absolute')
|
|
|
|
206
|
+ .removeClass('fixed-top hide');
|
|
|
|
207
|
+ }
|
|
|
|
208
|
+ fixedThumbDom.style.top = cbTop + cbH - tcH - sTop + 'px';
|
|
|
|
209
|
+ } else if (sTop > cbTop + cbH) {
|
|
|
|
210
|
+ if (classList.indexOf('hide') === -1) {
|
|
|
|
211
|
+ $fixedThumbContainer
|
|
|
|
212
|
+ .addClass('hide')
|
|
|
|
213
|
+ .removeClass('absolute');
|
|
|
|
214
|
+ }
|
|
|
|
215
|
+ }
|
|
|
|
216
|
+ $scroller.trigger('scroll');
|
|
|
|
217
|
+ });
|
|
|
|
218
|
+}; |
