138 lines
3.0 KiB
JavaScript
138 lines
3.0 KiB
JavaScript
define(function (require, exports, module) {
|
|
|
|
require('../lib/TweenMax.min.js');
|
|
var TimelineMax = window.TimelineMax,
|
|
$ = window.$;
|
|
|
|
/****************轮播图转换****************/
|
|
/*
|
|
html结构示意图
|
|
<div class="fans-container">
|
|
<div class="prev" data$clist data-ori="prev">向前</div>
|
|
<div class="fans-list">
|
|
<ul class="fans-list--ul" data-total="3" data-cur="0">
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
</div>
|
|
<div class="next" data$clist data-ori="next" >向后</div>
|
|
</div>
|
|
|
|
Clist({
|
|
parent:".fans-container",
|
|
target:".fans-list--ul",
|
|
num:4,
|
|
moveLen:...
|
|
});
|
|
*/
|
|
|
|
function Clist(config){
|
|
|
|
var _this = this;
|
|
this.parent = config.parent;
|
|
this.target = config.target;
|
|
this.num = config.num;
|
|
this.moveLen = config.moveLen;
|
|
this.moveDuration = config.moveDuration || 1000;
|
|
this.type = config.type || 0;
|
|
|
|
this.t = new TimelineMax();
|
|
this.supportOpacity = $.support.opacity;
|
|
|
|
$(document).on("click","[data-clist]",function(){
|
|
_this.run.call(this,_this);
|
|
});
|
|
}
|
|
|
|
Clist.prototype = {
|
|
|
|
constructor:Clist,
|
|
|
|
run:function(_this){
|
|
|
|
var $this = $(this),
|
|
moveList = $this.parent( _this.parent ).find( _this.target ),
|
|
_cur = parseInt( moveList.data('cur') ),
|
|
_total = parseInt( moveList.data('total') ),
|
|
ori = $this.data("ori"),
|
|
nextPos;
|
|
|
|
if(ori == "next" && (_cur + 1) < _total){
|
|
return _this.animate.call(_this,moveList, _cur, ++_cur);
|
|
}
|
|
|
|
if(ori == "prev" && (_cur - 1) >= 0){
|
|
return _this.animate.call(_this,moveList, _cur, --_cur);
|
|
}
|
|
},
|
|
|
|
animate:function($fansList, prev, _cur){
|
|
|
|
if(this.type == 0){
|
|
this.jqAnim($fansList, _cur);
|
|
return;
|
|
}
|
|
|
|
return this.supportOpacity?
|
|
this.tmAnim($fansList, prev, _cur):
|
|
this.jqAnim($fansList, _cur);
|
|
|
|
},
|
|
|
|
jqAnim:function($fansList, _cur){
|
|
|
|
$fansList.animate({
|
|
marginLeft: -this.moveLen * _cur
|
|
}, this.moveDuration, function () {
|
|
$fansList.data('cur', _cur);
|
|
});
|
|
},
|
|
|
|
tmAnim:function($fansList, pre, _cur){
|
|
|
|
var t = this.t,
|
|
num = this.num;
|
|
t.clear();
|
|
|
|
$fansList.data('cur', _cur);
|
|
|
|
var fanLi = $fansList.find("li"),
|
|
lis = fanLi.slice( _cur*num,_cur*num+num),
|
|
els = fanLi.slice(pre*num,pre*num+num),
|
|
totalLen = els.length;
|
|
|
|
if(totalLen < 1){
|
|
return;
|
|
}
|
|
|
|
var i = 0;
|
|
t.staggerTo(els,.1,{
|
|
scale:0,
|
|
opacity:0,
|
|
onComplete:function(){
|
|
i++;
|
|
if(i == totalLen){
|
|
nextAnim();
|
|
els.hide();
|
|
}
|
|
}
|
|
},.04);
|
|
|
|
function nextAnim(){
|
|
lis.show();
|
|
t.staggerFromTo(lis,1.5,{
|
|
opacity:0,
|
|
scale:0
|
|
},{
|
|
opacity:1,
|
|
scale:1,
|
|
ease:Elastic.easeOut
|
|
},.04);
|
|
}
|
|
}
|
|
}
|
|
|
|
module.exports = Clist;
|
|
}); |