article-type-three.js
5.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/**
* 类型3文章(Note: article-type-three在一个页面中只能出现一次（业务注意点），代码实现按照只有一个类型3实现)
* @author: xuqi(qi.xu@yoho.cn)
* @date；2015/3/30
*/
var $ = require('jquery');
require('lazyload');
/**
* 初始化$事件并默认选中列表第一项
*/
exports.init = function() {
$(function() {
var container = $('.article-type-three'),
thumbContainer = container.find('.thumb-container'),
prodList = container.find('.prod-list'),
wH = $(window).height(),
isInit = true,
tContainerH,
containerH,
containerTop;
/**
* 计算小箭头位置函数
* @param index(类型为number,调用函数li的index)
*/
arrowPosition = function (element,index) {
//640为设计图尺寸，也就是font-size为40下的1rem，所以数值都参照640定
var container = element,
item = container.find('li'),
len = item.size(), //获取一共多少li
midNum = Math.ceil(len / 2), //获取中间li的index+1
documentFont = parseInt($("html").css("fontSize")), //获取html的font-size
itemMarginRight = parseInt(item.css('marginRight'))/ documentFont * 40, //获取li的margin-right在640下数值
itemWidth = item.width() / documentFont * 40, //获取li的widtht在640下数值
surPlusValue = (parseInt(container.css('padding-left'))/ documentFont * 40 - itemMarginRight)/2, //获取container的padding-left与itemMarginRight相减后除以2在640下数值
backgroundLeft; //container背景图片左偏移的位置
/**
* 320为640分辨率下中间值
* index-midNum为偏移中间li的数值
* (index - midNum) * (itemWidth + itemMarginRight)当前li偏移中间li的距离
* - surPlusValue 减去container的padding与li的margin-right差值的一半
* 除以40，由640下的px变为rem
*/
backgroundLeft = -(320 - (index - midNum) * (itemWidth + itemMarginRight) - surPlusValue)/40 + 'rem';
container.css({"backgroundPosition":backgroundLeft + " bottom"});
};
//点击分类，显示分类下推荐商品列表
thumbContainer.delegate('.thumb', 'click', function() {
var curItem,
index;
curItem = $(this);
index = curItem.index();
thumbContainer.find('.thumb').removeClass('focus')
curItem.addClass('focus');
arrowPosition(thumbContainer,index + 1);
prodList.find('.prod')
.addClass('hide')
.eq(index)
.removeClass('hide');
//图片懒加载
$("img.lazy").lazyload({
placeholder : "data:image/gif;base64,R0lGODlhAQABAJEAAAAAAP///93d3f///yH5BAEAAAMALAAAAAABAAEAAAICVAEAOw=="
});
//scroll to top
if (!isInit) {
$('body').animate({
scrollTop: container.offset().top - (thumbContainer.hasClass('static') ? 0 : thumbContainer.outerHeight())
}, 400);
} else {
isInit = false;
}
});
//默认选中第一个
thumbContainer.find('.thumb:first-child').click();
tContainerH = thumbContainer.outerHeight(); //thumber-container高度
containerH = container.height(); //article-type-three高度
containerTop = container.offset().top; //article-type-three offset top
function resetStatus() {
thumbContainer.removeClass('static fixed-top fixed-bottom absolute').css('top', '');
prodList.css('margin-top', '');
}
//scroll时控制列表的位置
$(document).scroll(function() {
var sTop = $(this).scrollTop();
resetStatus();
//Tip: removeClass只用移除相邻状态即可
if (sTop <= containerTop - wH + tContainerH) {
thumbContainer
.addClass('fixed-bottom');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop) {
thumbContainer
.addClass('static');
} else if (sTop <= containerTop + containerH - tContainerH) {
thumbContainer
.addClass('fixed-top');
prodList.css({
'margin-top': tContainerH
});
} else if (sTop <= containerTop + containerH) {
thumbContainer
.addClass('absolute')
.css({
top: containerTop + containerH - tContainerH
});
prodList.css({
'margin-top': tContainerH
});
} else if (sTop > containerTop + containerH) {
thumbContainer
.addClass('static');
}
});
//初始执行scroll从而初始化分类信息的位置（非0时默认会执行scroll）
if ($(document).scrollTop() === 0) {
$(document).scroll();
}
});
};