标签：
<div id="page-wrapper">
<div class="z_nav-tabs">
<span id="leftArrow" class="toleft"></span>//可以点击向左滚动的按钮
<span id="outDiv">//中间的内容块
<ul class="nav" data-movestep="0" id="inZoom" >
<li>
<span class="z_close">×</span>
<a href="#">我的工作台</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录2</a>
</li>
<li class="active">
<span class="z_close">×</span>
<a href="#">新增咨询记录3</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录4</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录5</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录6</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录7</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录8</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录9</a>
</li>
<li>
<span class="z_close">×</span>
<a href="#">新增咨询记录10</a>
</li>
</ul>
</span>
<span id="rightArrow" class="toright"></span>//可以点击向右滚动的按钮
</div>
</div>
引入进来的scroll.js插件
(function ($) {
//TAB 移动 -----begin
$.fn.myScroll = function (options) {
//默认参数
var defaults = {
leftArrow: ‘‘,
rightArrow: ‘‘,
outDiv: ‘‘,
inZoom: ‘‘
};
opts = $.extend(defaults, options);
var $outDiv = $("#" + opts.outDiv),
$inZoom = $("#" + opts.inZoom),
$leftArrow = $("#" + opts.leftArrow),
$rightArrow = $("#" + opts.rightArrow);
//初始化移动步长为零
$inZoom.data("movestep", "0");
$inZoom.css({ left: 0 + "px" });
var outDivWidth = $leftArrow.parent().width()-120 - $leftArrow.outerWidth() * 2 - 20,
outDivHeight = $outDiv.height(),
outDivLeft = $outDiv.offset().left,
outDivTop = $outDiv.offset().top,
inZoomHeight = $inZoom.height(),
inZoomLeft = $inZoom.offset().left,
inZoomTop = $inZoom.offset().top;
$outDiv.width(outDivWidth);
var inZoomWidth = 0;
$inZoom.find("li").each(function (index, item) {
inZoomWidth += $(this).outerWidth();
});
$inZoom.width(inZoomWidth + "px");
//如果右侧未显示完全，则显示左侧箭头
leftArrowOpt($leftArrow, outDivLeft + outDivWidth, inZoomLeft + inZoomWidth);
//如果左侧未显示完全，则显示右侧箭头
rightArrowOpt($rightArrow, outDivLeft, inZoomLeft);
//绑定左箭头事件
$leftArrow.off("click").on("click", function () {
if ($leftArrow.hasClass("toleft")) {
$leftArrow.removeClass().addClass("toleftCut");
var leftStep = parseInt($inZoom.data("movestep")) - 100;
$inZoom.data("movestep", leftStep);
$inZoom.animate({ left: leftStep + "px" }, 1000, function () {
leftArrowOpt($leftArrow, outDivLeft + outDivWidth, inZoomLeft + leftStep + inZoomWidth);
rightArrowOpt($rightArrow, outDivLeft, inZoomLeft + leftStep);
});
}
});
//绑定右箭头事件
$rightArrow.off("click").on("click", function () {
if ($rightArrow.hasClass("toright")) {
$rightArrow.removeClass().addClass("torightCut");
var leftStep = parseInt($inZoom.data("movestep")) + 100;
$inZoom.data("movestep", leftStep);
$inZoom.animate({ left: leftStep + "px" }, 1000, function () {
leftArrowOpt($leftArrow, outDivLeft + outDivWidth, inZoomLeft + leftStep + inZoomWidth);
rightArrowOpt($rightArrow, outDivLeft, inZoomLeft + leftStep);
});
}
});
var inZoomSpanColor = "";
$inZoom.find("span").hover(
function () {
inZoomSpan = $(this).css("color");
$(this).css("color", "red");
},
function () {
$(this).css("color", inZoomSpanColor);
inZoomSpanColor = "";
});
}
//右侧箭头处理
function rightArrowOpt($rightArrow, inleft, outleft) {
//如果左侧未显示完全，则显示右侧箭头
if (inleft > outleft) {
$rightArrow.removeClass().addClass("toright");
} else {
$rightArrow.removeClass().addClass("torighthidden");
}
}
//左侧箭头处理
function leftArrowOpt($leftArrow, inleft, outleft) {
//如果右侧未显示完全，则显示左侧箭头
if (inleft < outleft) {
$leftArrow.removeClass().addClass("toleft");
} else {
$leftArrow.removeClass().addClass("tolefthidden");
}
}
//TAB 移动 -----end
})(jQuery);
//初始化移动选项卡
$("#outDiv").myScroll({ "leftArrow": "leftArrow", "rightArrow": "rightArrow", "outDiv": "outDiv", "inZoom": "inZoom" });
//删除TAB选项卡
$("#inZoom").find("span").die("click").live("click", function () {
console.time("realclose");
var pageid = $(this).parent().data("pageid");
if ($(this).parent().hasClass("active")) {
var nextId = "";
if ($(this).parent().next().length > 0) {
nextId = $(this).parent().next().addClass("active").data("pageid");
} else {
nextId = $(this).parent().prev().addClass("active").data("pageid");
}
//选项卡内容设为可见
$("#tabContent_" + nextId).siblings().hide(function () { $("#tabContent_" + nextId).show(); });
}
$(this).parent().remove();
$("#tabContent_" + pageid).remove();
$("#outDiv").myScroll({ "leftArrow": opts.leftArrow, "rightArrow": opts.rightArrow, "outDiv": opts.outDiv, "inZoom": opts.inZoom });
console.timeEnd("realclose");
return false;
});
最后实现
这样的效果页面。
tab内容超过一定的宽度后，可以点击左右按钮进行左右轮播显示
标签：
原文地址：http://www.cnblogs.com/jsingleegg/p/4585083.html
