flip.js
5.78 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/**
* @fileOverview 实现图片翻转控件
* @author ww
* @date 2014-07-22
*/
var $ = require("jquery");
require("jquery.rotate2d");
var height;
var scrollTop;
var windowHeight = $(window).height();
var delay, returnDelay, isPlaying = false;
//翻转当前对象动画
function RevolvePic(target) {
//延时对象
var timeHandler1, timeHandler2, timeHandler3, timeHandler4;
var Y = target.offset().top;
height = target.height();
//分别判断图片小于屏幕和大于屏幕的情况
var last = target.find("a[pic='last']"); //第二章图片对象
last.bind("webkitAnimationEnd", function() {
isPlaying = false;
});
//当图片高度小于屏幕高度：滚动高度+屏幕高度>=图片顶端位置+图片高度的三分之二（当三分之二的图片进入屏幕范围即可开始旋转），滚动高度<空间顶端位置+控件高度的三分之二（说明向上滚动）
if ((scrollTop + windowHeight >= Y + height / 3 * 2 && scrollTop < Y + height / 3 * 2) //图片小于屏幕
||
//当图片高度大于屏幕时分别判断：图片顶端位置+图片高度<=滚动高度+屏幕高度（说明图片已经滚动到底）以及 图片顶端位置-50<=滚动高度（说明图片顶端接近屏幕顶端）
//以上两种判断分别对应：向上滚动、向下滚动
(height >= windowHeight && Y - 50 <= scrollTop) || (height >= windowHeight && Y + height <= scrollTop + windowHeight)) { //当图片大于屏幕时执行
isStayLong = true; //用户在该显示区域已经停留了足够长的时间，1S
//判断是否已经增加过了旋转样式，如果没有增加就追加
if (target.attr("RevolvePic") == undefined) {
var eleBack = null,
eleFront = null,
// 两张被翻转的图片元素
eleList = target.find(".img");
// 确定前面与后面元素
var funBackOrFront = function() {
eleList.each(function() {
if ($(this).hasClass("out")) {
eleBack = $(this);
} else {
eleFront = $(this);
}
});
};
window.setTimeout(function() {
//根据动画播放完毕的回调事件判断动画播放不会重叠
if (!isPlaying) {
isPlaying = true;
funBackOrFront();
timeHandler1 = window.setTimeout(function() {
eleFront.addClass("out").removeClass("in");
timeHandler2 = setTimeout(function() {
eleBack.addClass("in").removeClass("out");
// 重新确定正反元素
funBackOrFront();
}, 155);
}, delay - 1000);
timeHandler3 = window.setTimeout(function() {
eleFront.addClass("out").removeClass("in");
timeHandler4 = setTimeout(function() {
eleBack.addClass("in").removeClass("out");
// 重新确定正反元素
funBackOrFront();
target.find(".imga:first").removeClass("out").removeClass("in");
target.find(".imga:last").addClass("out");
}, 155);
}, delay + returnDelay - 1000);
target.attr("RevolvePic", "RevolvePic");
}
}, 1000);
}
} else {
//页面被拉动到其他区域后
isStayLong = false;
//移出当前区域后解除对target对象的标记
if (target.attr("RevolvePic") != undefined) {
target.removeAttr("RevolvePic");
}
//清除四个定时器
window.clearTimeout(timeHandler1);
window.clearTimeout(timeHandler2);
window.clearTimeout(timeHandler3);
window.clearTimeout(timeHandler4);
}
}
exports.init = function(info) {
/**
* target:被翻转图片的父级DIV元素
* height：图片高度
* delay：从静止到开始动画的等待时间
* returnDelay：从第二幅图片翻转至第一幅图片的等待时间
*/
var defaults = {
operate: "auto", //auto:进入显示区域自动翻转；mouse：鼠标hover翻转一次，鼠标离开再次翻转
delay: 2000,
returnDelay: 2000,
wrapClass: '.lifestyle-flip'
}
var opts = $.extend(defaults, info);
var targets = null;
targets = $(opts.wrapClass);
height = opts.height;
delay = opts.delay;
returnDelay = opts.returnDelay;
//当前滚动条的位置
scrollTop = $(document).scrollTop();
//是否单次播放完毕
var isPlaying = false;
var isStayLong = false;
if (opts.operate == "auto") {
//获取到前后面的图片
targets.each(function(index, obj) {
RevolvePic($(obj));
});
$(window).scroll(function() {
scrollTop = $(document).scrollTop();
targets.each(function(index, obj) {
RevolvePic($(obj));
});
});
} else if (opts.operate == "mouse") {
var eleBack = null,
eleFront = null;
// 确定前面与后面元素
var funBackOrFront = function(tmpobj) {
eleList = tmpobj.find(".img");
eleList.each(function() {
if ($(this).hasClass("out")) {
eleBack = $(this);
} else {
eleFront = $(this);
}
});
};
targets.each(function(index, obj) {
$(obj).dbRotate2D();
});
}
};