xinyun.github.com/coveflow.js at master · xinyun/xinyun.github.com · GitHub

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
/**
@像itunes一样的照片列表
@作者towebapp.com
@version 0.1.1
http://towebapp.com/

Copyright 2012-2014 "towebapp.com"
Dual licensed under the MIT and GPL licenses.
*/

;(function($){

    $.fn.extend({

    	coveflow:function (opts) {

		this.options = {
			width:480,
			scale:.6,
			startIndex:-1,
			step:100,
			flat:100,
			duration:500,
			onActivateIndex:function(){},
			onIndexChange:function(){},
			onIndexChanging:function(){},
			onIndexChanged:function(){},
		};

		$.extend( true, this.options, opts );

		var options=this.options,
			self=this,
			startIndex=options.startIndex,
			wrapper	= $(this),
		    elem	= wrapper.find('div'),
			elng  = elem.length,
			index = -1,
			oindex=-1;

		this.init=function(){
			if(startIndex==-1){
				startIndex=Math.floor(elng/2);
			}else if(startIndex>elng-1){
				ostartIndex=elng-1;
			};
			$(elem).live('click',function(){
				self.setIndex(elem.index($(this)));
				if($.isFunction(options.onActivateIndex)){
					options.onActivateIndex(elem.index($(this)));
				}
			});
			this.setIndex(startIndex);

		};

		this.setIndex=function(num){
			if(index!=num){
				oindex=index;
				index=num;
				update(num);
				if($.isFunction(options.onIndexChange)){
					options.onIndexChange(index,oindex);
				}
			}
		};

		var update=function(num){
			if(num>oindex){
				move(oindex+1);
			}else{
				move(oindex-1);
			}
		};
		var move=function(num){
			if(num!=index){
				var timing='linear';
				var duration='200ms';
				setTimeout(function(){
							if(num>oindex){
								move(num+1);
							}else{
								move(num-1);
							}
				},200);
			}else{
				var timing='ease-out';
				var duration=options.duration+'ms';
				setTimeout(function(){
						if($.isFunction(options.onIndexChanged)){
						options.onIndexChanged(num);
					}
				},options.duration);
			};
			$(elem).css({
								  '-webkit-animation-duration':duration,
								  '-webkit-animation-timing-function':timing
								 });
			$(elem).find('li').css({
								  '-webkit-animation-duration':duration,
								  '-webkit-animation-timing-function':timing
								 });
			$(elem[num]).addClass('flat').removeClass('turnRight').removeClass('turnLeft').css({zIndex:elng,
								  '-webkit-transform':'translateX('+(-options.width)/2+'px) scale(1)'
								 });

			for(i=0;i<num;i++){
					var left=-(options.width)/2-options.flat-(num-i)*options.step;
					$(elem[i]).addClass('turnLeft').removeClass('turnRight').removeClass('flat').css({zIndex:i+1,
								  '-webkit-transform':'translateX('+left+'px)   scale('+options.scale+')'
								 });
				};
			for(i=elng-1;i>num;i--){
					var left=-(options.width)/2+options.flat+(i-num)*options.step;
					$(elem[i]).addClass('turnRight').removeClass('turnLeft').removeClass('flat').css({zIndex:elng-i,
								  '-webkit-transform':'translateX('+left+'px) scale('+options.scale+')'
								 });
				};
			if($.isFunction(options.onIndexChanging)){
					options.onIndexChanging(num);
				}

		};
		this.init();
	  }
   });


})(jQuery);

//$('#coveflow').coveflow({onIndexChanged:function(index){alert(index)}});