';
this.html += '
';
this.html += '
';
this.html += '
';
this.html += '
' + this.self + '
';
this.html += '
';
this.html += '';
data.obj.addClass('box_visual_srcoll').attr('data-box-srcoll', this.number).html(this.html);
this.setup();
this.bind();
if ($.isFunction(this.callback)) {
this.callback();
}
},
setup: function() {
this.suit = data.obj.find('.srcoll_list .srcoll_suit');
this.box = data.obj.find('.srcoll_list .srcoll_suit_box');
this.box.element = this.box[0];
this.children = this.box.children();
this.length = this.children.size();
//this.width = this.children.eq(0).outerWidth(true);
if (this.children.eq(0)[0].currentStyle) {
//IE、Opera
this.cElement = this.children.eq(0)[0].currentStyle;
} else {
//FF、Chrome、Safari
this.cElement = getComputedStyle(this.children.eq(0)[0], false);
}
this.width = parseFloat(this.cElement.width) + parseFloat(this.cElement.marginRight) + parseFloat(this.cElement.marginLeft); //精准到小数点
if (this.length < 2) {
return false;
}
this.box.element.style.width = parseFloat(this.length * this.width + 1).toFixed(2) + 'px'; //1px为额外的偏移量
this.slide(this.index, 0);
for (i = 1; i <= this.length; ++i) {
//兼容可视化
if ((i * this.width) >= this.suit.width()) {
this.count = i;
if (((i - .5) * this.width) >= this.suit.width()) {
//尚未超过半个
this.count = i - 1;
}
break;
}
}
},
bind: function() {
$('*[data-btn-srcoll="' + this.number + '"]').on('click', function() {
$(this).data('srcoll-direction') == 'prev' ? data.prev() : data.next();
});
},
prev: function() {
if (this.index) {
this.slide(this.index - 1, this.speed);
}
},
next: function() {
if (this.index < this.length - this.count) {
this.slide(this.index + 1, this.speed);
}
},
slide: function(index, speed) {
var moveWith = index * this.width;
var Offset = moveWith + this.suit.width() - this.length * this.width;
if(Offset > 0) {
moveWith = moveWith - Offset;
}
style = this.box.element.style;
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = speed + 'ms';
style.MozTransform = style.webkitTransform = 'translate3d(' + -(moveWith) + 'px, 0, 0)';
style.msTransform = style.OTransform = 'translateX(' + -(moveWith) + 'px)';
this.index = index;
},
handleEvent: function(e) {
var that = this;
if (!e.touches) {
e.touches = new Array(e);
e.scale = false;
}
switch (e.type) {
case 'touchstart': this.touchStart(e); break;
case 'touchmove': this.touchMove(e); break;
case 'touchend': this.touchEnd(e); break;
case 'resize': this.setup(); break;
}
},
touchStart: function(e) {
this.tConfig = {
pageX: e.touches[0].pageX,
pageY: e.touches[0].pageY,
moveX: this.box.element.style.msTransform ? parseFloat(this.box.element.style.msTransform.replace('translateX(', '')) : 0
};
this.movingX = 0;
this.surplus = parseFloat(this.box.width() - this.suit.width()) * -1;
this.tMoveX = 0;
},
touchMove: function(e) {
if (e.touches.length > 1 || e.scale && e.scale !== 1) return;
this.movingX = e.touches[0].pageX - this.tConfig.pageX;
if (this.count == 1) {
this.movingX = this.movingX / (((this.index == 0 && this.movingX > 0) || (this.index == this.length - this.count && this.movingX < 0)) ? (Math.abs(this.movingX) / this.width + 1) : 1); //左右尽头的缓冲效果
style = this.box.element.style;
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '0ms';
style.MozTransform = style.webkitTransform = 'translate3d(' + (this.movingX - this.index * this.width) + 'px, 0, 0)';
style.msTransform = style.OTransform = 'translateX(' + (this.movingX - this.index * this.width) + 'px)';
} else {
this.tMoveX = parseFloat(this.tConfig.moveX + this.movingX);
if (this.tMoveX > 0 || (this.tMoveX < 0 && this.tMoveX < this.surplus)) {
//左右尽头的缓冲效果
this.tMoveX = this.tConfig.moveX + (this.movingX / (Math.abs(this.tMoveX) / this.width + 1));
}
style = this.box.element.style;
style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = '0ms';
style.MozTransform = style.webkitTransform = 'translate3d(' + this.tMoveX + 'px, 0, 0)';
style.msTransform = style.OTransform = 'translateX(' + this.tMoveX + 'px)';
}
},
touchEnd: function(e) {
if (this.count == 1) {
var isSlideHalf = 1; //Math.abs(this.movingX) > this.width / 2,
isBoundary = (this.index == 0 && this.movingX > 0) || (this.index == this.length - this.count && this.movingX < 0); //左右两边尽头
this.slide(this.index + (isSlideHalf && !isBoundary ? (this.movingX < 0 ? 1 : -1) : 0), this.speed); //拖右负数，拖左正数
} else {
this.tMoveX = this.tConfig.moveX + this.movingX;
if (this.tMoveX > 0) {
//左尽头
this.slide(0, 0);
} else if (this.tMoveX < 0 && this.tMoveX < this.surplus) {
//右尽头
this.slide(this.length - 1, 0);
}
}
}
}, data);
data.init();
}
/**
* 可视化选项卡插件
*
* @param: data[object] button:事件触发按钮(选择器) box:事件触发盒子(选择器) current:选中相关的样式类名,默认current
*
* 绑定参考: $('#xxx').visualTab({'button':'.category a', 'box':'.box', 'current':'cur FontBgColor', 'box_current':'cur FontBgColor'});
*/
$.fn.visualTab = function(data) {
data = $.extend({
obj: $(this),
init: function() {
this.button = data.button;
this.box = data.box;
this.current = data.current || 'current';
this.box_current= data.box_current || 'current';
this.selector = data.obj.find(this.button + ':visible').selector;
this.selectorBox= data.obj.find(this.box).selector;
this.bind();
},
bind: function() {
data.obj.find(this.button + ':visible').on('click', function() {
index = $(this).index(this.selector);
data.display(index);
});
},
display: function(index) {
data.obj.find(this.button).eq(index).addClass(this.current).siblings(this.selector).removeClass(this.current);
data.obj.find(this.box).eq(index).show().addClass(this.box_current).siblings(this.selectorBox).hide().removeClass(this.box_current);
},
}, data);
data.init();
}
'+tips+'