tabox 左右滑动选项卡封装jquery插件

最新推荐文章于 2020-08-01 08:20:14 发布

代码-君

最新推荐文章于 2020-08-01 08:20:14 发布

阅读量787

点赞数

分类专栏：常用功能封装jquery插件文章标签： jquery插件

本文链接：https://blog.csdn.net/u012764368/article/details/46706721

版权

常用功能封装jquery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

/***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);

代码-君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tabox 左右滑动选项卡封装jquery插件

/***demo******/tabBOX左右滑动 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;}
复制链接

扫一扫

专栏目录