/***demo******/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tabBOX左右滑动</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="textjquery.js"></script>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style:none;}
.clear{clear:both;}
.tab_wrap{width:400px;margin:0 auto;padding-bottom:20px;}
.tab{
width:400px;
height:40px;
position:relative;
text-align:justify;
text-align-last:justify;
}
.tab ul{height:40px;}
.tab li{
width:80px;
height:40px;
line-height:48px;
display:inline-block;
background:#9FC;
text-align:center;
position:relative;
}
.tabbox{width:400px;overflow:hidden;}
.tabbox ul{height:300px;background:#FCF;position:relative;}
.tabbox li{float:left;width:400px;text-align:center;font-size:24px;}
.moving_bg{position:absolute;width:80px;z-index:190;left:0;height:39px;}
</style>
</head>
<body>
<div class="tab_wrap" id="tab01">
<div class="tab">
<ul>
<div class="moving_bg"></div>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="tabbox">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
</div>
<div class="tab_wrap" id="tab02">
<div class="tab">
<ul>
<div class="moving_bg"> </div>
<li>标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
</div>
<div class="tabbox">
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#tab01").pluginname({speed:300}); //tab01调用插件 平且覆盖插件的默认速度值
$("#tab02").pluginname({ //tab02调用插件 平且覆盖插件的默认速度值 和 下边框颜色值
speed:100,
bottom:"1px solid #260404"
});
})
</script>
</html>
/*****jquery*****/
(function($) {
$.fn.extend({
pluginname: function(options) {
var opts = $.extend({},defaults,options); //后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。复制给opts对象
return this.each(function() { //返回jquery对象 并且遍历这个jquery对象 以便后续可以链式调用
var $this = $(this); //当前调用插件的DOM对象
var $tab_box = $this.find(".tabbox"); //当前调用插件DOM下的tabbox元素
var boxli_width = $tab_box.find("li").outerWidth(true); //当前调用插件DOM下的tabbox下li的最大宽度
var boxul_width = boxli_width*$tab_box.find("li").length; //宽度乘以长度
$tab_box.find("ul").width(boxul_width); //当前调用插件DOM下的tabbox元素下ul宽度设为 li宽度乘以li长度
var $tab = $this.find(".tab") //当前调用插件DOM下的tab元素
$tab.find(".moving_bg").css({"border-bottom":opts.bottom}); //当前tab下的moving_bg元素css设为 opts对象的bottom属性
$tab.find("li").mouseover(function(){ //鼠标进入当前li
var index = $(this).index()-1; //index索引等于当前索引-1
var magin = index*boxli_width; //距离等于索引乘以宽度
magin*=-1; //距离转为负数
$tab_box.find("ul").stop().animate({"left":magin},opts.speed);
//当前调用插件DOM下的tabbox元下的ul先停止动画清楚队列 添加动画 left距离设为margin 速度为opts对象的 speed属性
$tab.find(".moving_bg").stop().animate({left:$(this).position().left},opts.speed);
//当前tab下的moving_bg元素先停止动画清楚队列 添加动画 left:当前tab下li距离左边的绝对位置 速度为opts对象的speed属性
})
})
}
})
var defaults = { //初始化defaults对象
speed:100,
bottom:"1px solid #ff0000"
}
var options = { //调用插件后传入的新对象
speed:speed,
bottom:"1px solid #260404"
}
})(jQuery);