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

幸运
185
文章
0
评论
三月 12, 202012:10:39 评论 82 1707字阅读5分41秒

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

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

下面先上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>

本文来源于:jquery-tab切换,切换时滑块跟随鼠标滑动-幸运草博客
特别声明:以上文章内容仅代表作者本人观点,不代表幸运草博客观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与幸运草联系。

  • 本站QQ群
  • weinxin
  • 捐赠本站
  • weinxin
jquery中cookie用法介绍 jQuery

jquery中cookie用法介绍

cookie在jquery中有指定的cookie操作类,下面我先来介绍我们在使用cookie操作类时的一些问题,然后介绍正确的使用方法。 使用JQuery操作cookie时 发生取的值不正确的问题: ...
jQuery事件:bind、delegate、on的区别 jQuery

jQuery事件:bind、delegate、on的区别

「内容简介」本文详解各种jQuery事件绑定方法:on,bind,delegate,live,unbind,trigger。 同时总结一下常用的jQuery事件技术:如何阻止事件冒泡、阻止浏览器默认行...
jQuery入门讲解-jQuery样式操作 jQuery

jQuery入门讲解-jQuery样式操作

css 操作 通过css()的方法设置或者获取样式,无论样式属性是从外部导入的,还是直接写在HTML标签里面的,css()方法都可以获取到。。 1、设置单个样式: 2、设置多个样式: 操作多个样式的时...
Jquery Notes jQuery

Jquery Notes

1.什么是jQuery 2.如何使用jQuery 3.查找元素 1.什么是jQuery jQuery是第三方开发的执行DOM操作的极简化的函数库 第三方:下载 执行DOM操作:jQuery还是执行DO...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: