jquery-tab切换,切换时滑块跟随鼠标滑动

Posted 2021-04-08 xxger前端学习

        tab切换在前端应用中还是比较广泛的，下面是我自己写tab切换时的方法，gif图中滑块滑动效果没那么流畅，小伙伴们将就着看吧。

下面先上html结构，样式具体写法就不展示出来了，只要注意slide滑块需要用定位方式来写，并且层级放在li文字下方。

<div id="tab-box">

<ul id="tab-head">

<span class="slide"></span>

<li class="act">javascript</li>

<li>jquery</li>

<li>HTML5</li>

<li>CSS3</li>

</ul>

<div id="tab-con">

<ul class="act">

<li>javascirpt学习第一课</li>

<li>javascirpt学习第二课</li>

<li>javascirpt学习第三课</li>

<li>javascirpt学习第四课</li>

<li>javascirpt学习第五课</li>

</ul>

<ul>

<li>jquery练习1</li>

<li>jquery练习2</li>

<li>jquery练习3</li>

</ul>

<ul>

<li>HTML5-demo1</li>

<li>HTML5-demo2</li>

</ul>

<ul>

<li>css3的使用1</li>

<li>css3的使用2</li>

<li>css3的使用3</li>

<li>css3的使用4</li>

<li>css3的使用5</li>

<li>css3的使用6</li>

<li>css3的使用7</li>

</ul>

</div>

</div>

然后就是脚本部分了：

<script type="text/javascript">

var Li = $('#tab-head li');

var slide = $('#tab-head span');

//初始打开页面时，滑块的宽度与第一个li标签的宽度相同，+20是因为li标签的padding值设为了20

var firstLi = Li.eq(0).width() + 20;

$('#tab-head .slide').width(firstLi);

//tab切换

Li.click(function() {

$(this).siblings().removeClass('act');

$(this).addClass('act');

//获取该li的索引值

var index = $(this).index();

$('#tab-con ul').eq(index).siblings().removeClass('act');

$('#tab-con ul').eq(index).addClass('act');

});

//鼠标移动时，滑块跟随鼠标移动

Li.mouseover(function() {

var left = $(this).position().left;

//li的宽度+20px的padding值

var width = $(this).width() + 20;

//停止正在做的动效（为了让滑块移动连贯，去掉后滑块每次会恢复原位再移动）

slide.stop();

//$(selector).animate({params},speed,callback);  callback是动画完成后所执行的函数名称

slide.animate({

'left': left,

'width': width

}, '350');

});

//鼠标移出时，滑块恢复到当前有类名act的位置

Li.mouseout(function() {

var left = $('#tab-head .act').position().left;

var width = $('#tab-head .act').width() + 20;

slide.stop();

slide.animate({

'left': left,

'width': width

}, '350');

});

</script>