分别使用原生JS与jQuery实现选项卡切换动画
2018-12-13 10:51
459 查看
大概就是实现如图所示的效果:
jQuery实现:
首先是使用jQuery实现动画效果,依赖于jQuery选择器和animate动画,写起来非常简单:
<script type="text/javascript"> $(function(){ $('input').click(function(){ var current = $(this).index(); var left = current * -500; $(this).addClass('current').siblings().removeClass('current'); $('.tab_cons').stop().animate({left:left + "px"}); }); }); </script>
原生JS实现:
在不使用animate动画的情况下,我们可以采用JS定时器思路:
<script type="text/javascript"> $(function(){ var time = null; $('input').click(function(){ var current = $(this).index(); var left = current * -500; $(this).addClass('current').siblings().removeClass('current'); var currentLeft = parseInt($('.tab_cons').css('left')); moveDiv(left, currentLeft); }); function moveDiv(left, currentLeft){ clearInterval(time); time = setInterval(move,1); function move(){ var temp = left - currentLeft; //console.log(temp); if(temp>0){ currentLeft += 10; }else if(temp<0){ currentLeft -= 10; }else{ clearInterval(time); return; } $('.tab_cons').css('left', currentLeft + 'px'); } } }); </script>
这里偷了点懒,JQuery选择器实在太好用了,排他选择简直神器啊
有兴趣的同学可以自己将用到JQuery的地方改成原生JS
附件:
附上html文件和css样式
html:
<body> <div class="tab_wrap"> <div class="tab_btns"> <input type="button" value="公司新闻" class="current"> <input type="button" value="国际新闻"> <input type="button" value="行业动态"> </div> <div class="tab_cons"> <div class="limit"> <ul> <li><a href="#">公司新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> <li><a href="#">帕楚利亚谈与香珀特冲突:就是普通争球而已</a><span>06-11 18:25</span></li> <li><a href="#">两战78分!詹皇狂赞欧文:他注定为大场面而生</a><span>06-11 18:23</span></li> <li><a href="#">利文斯顿:冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> <li><a href="#">球鞋收入榜:詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> <li><a href="#">科勒称若有G6会再去现场 小范:人们应向她道歉</a><span>06-11 09:56</span></li> </ul> <ul> <li><a href="#">国际新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> <li><a href="#">帕楚利亚谈与香珀特冲突:就是普通争球而已</a><span>06-11 18:25</span></li> <li><a href="#">两战78分!詹皇狂赞欧文:他注定为大场面而生</a><span>06-11 18:23</span></li> <li><a href="#">利文斯顿:冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> <li><a href="#">球鞋收入榜:詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> <li><a href="#">科勒称若有G6会再去现场 小范:人们应向她道歉</a><span>06-11 09:56</span></li> </ul> <ul> <li><a href="#">行业动态G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> <li><a href="#">帕楚利亚谈与香珀特冲突:就是普通争球而已</a><span>06-11 18:25</span></li> <li><a href="#">两战78分!詹皇狂赞欧文:他注定为大场面而生</a><span>06-11 18:23</span></li> <li><a href="#">利文斯顿:冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> <li><a href="#">球鞋收入榜:詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> <li><a href="#">科勒称若有G6会再去现场 小范:人们应向她道歉</a><span>06-11 09:56</span></li> </ul> </div> </div> </div> </body>
css:
body,ul{ margin:0px; padding:0px; } ul{ list-style:none; } a{ text-decoration:none; } .tab_wrap{ width:500px; height:300px; margin:50px auto 0; overflow:hidden; position:relative; } .tab_btns{ height:50px; } .tab_btns input{ width:100px; height:50px; border:0px; background:#ddd; font-size:14px; outline:none; } .tab_btns .current{ background:gold; } .tab_cons{ height:250px; width:1500px; background:gold; position:absolute; left:0px; top:50px; } .tab_cons ul{ width:500px; height:235px; float:left; padding-top:15px; } .tab_cons ul li{ line-height:30px; margin:5px 20px; overflow:hidden; } .tab_cons ul a{ font-size:14px; color:#333; float:left; } .tab_cons ul span{ font-size:14px; color:#666; float:right; }
相关文章推荐
- 9.使用原生js实现类似于jquery的动画
- 原生js和jquery分别实现伸缩菜单的制作-水平方向导航栏
- 原生js和jquery分别实现横向导航菜单效果
- 用js和jQuery分别实现选项卡功能
- javascript 原生JS实现 选项卡的切换(两种方法)
- JavaScript Tag标签切换实现的几种方法 原生js + jquery
- Tab标签页(面试常考)分别用原生js和jquery实现
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 图片轮播(左右切换)--JS原生和jQuery实现
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 使用jQuery和css3实现了仿淘宝ued博客左边的菜单切换动画
- 原生js与jQuery实现简单的tab切换特效对比
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- 利用原生JS与jQuery实现数字线性变化的动画
- 使用原生js onkeyup+jQuery实现简单的双向数据绑定
- 使用js和jQuery分别实现弹起对象下标
- jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
- 使用jQuery+css实现选项卡切换功能
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- javascript实现tabs选项卡切换效果(自写原生js)