slide切换:回调函数-标签项的滑动处理
$("#slideCallback").slide({ trigger: "click", keepTags: true }, checkTagScroll("#slideCallback", true));
$("#slideCallback2").slide({ trigger: "click", keepTags: true }, checkTagScroll("#slideCallback2", false));
回调处理函数
/**
* 负责标签项滑动的回调处理
* @param {string} id 目标元素的选择器字符串
* @param {Boolean} isWidth 是否为水平布局
* @return {function} 执行函数
*/
function checkTagScroll(id, isWidth)
{
var $ele = $(id),
$tagBox = $ele.find(".j_slideTags"),
$tagOuter = $tagBox.parent(),
attr = isWidth ? "width" : "height",
outerAttr = isWidth ? "outerWidth" : "outerHeight",
scrollAttr = isWidth ? "scrollWidth" : "scrollHeight",
scrollProp = isWidth ? "scrollLeft" : "scrollTop",
base = $tagBox.children()[outerAttr](true),
tagSee = Math.round($tagOuter[attr]() / base),
distance = 0,
startFun;
if(isWidth){
$tagBox.css("width", base * $tagBox.children().length);
}
if($tagBox[0][scrollAttr] > $tagOuter[attr]()){
$tagBox = isWidth ? $tagOuter : $tagBox;
startFun = function(cur, old, action){
var that = this,
scrolled = $tagBox[0][scrollProp], // 当前已经滑动的距离
scrolledNum = scrolled / base; // 当前已经滑动的标签数量
// 切换至首页
if(cur === 0){
distance = 0;
}
// 切换至尾页
else if(cur === that.pages - 1){
distance = (that.pages - tagSee) * base;
}
// 向后切换(下一页)
else if(cur > old && cur + 1 - scrolledNum === tagSee){
distance += base;
}
// 向前切换(上一页)
else if(cur < old && cur + 1 - scrolledNum === 1){
distance -= base;
}
// 标签运动时锁定切换
if(scrolled !== distance){
that.lock();
$tagBox.stop().animate(isWidth ? {scrollLeft: distance} : {scrollTop: distance}, function(){ that.unlock() });
}
};
}
return startFun;
}