Home > Article > Web Front-end > Detailed analysis of JS implementation of label scrolling switching effect
This article mainly brings you the effect of using JS to achieve scrolling switching after clicking on the item label. Friends who are interested can test it and learn it. Hope it helps everyone.
The JS effect of this article is to achieve the effect of switching the content below with the scroll when the mouse clicks on the ITEM label. Let's first take a look at the rendering after running.
The following is the running code:
<!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=gb2312" /> <title>jQuery实现的平滑滚动选项卡</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> .tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;} .tabs_item{height: 36px;} .tabs_block{height: 300px;} .list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;background-color:#FC0;cursor: pointer;} .list_item.active{color: #FFF;background-color:#F60} .tabs_block{width: 20000px; position: relative;} .list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;background-color:#F4F4F4} .list_block.show{display: block;} </style> <script>jQuery.easing['easeOutCubic'] = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }; function Tabs(tabs,list,block,item,$){ var tabs = $(tabs); var width = tabs.width(); tabs.find(list+':first').addClass('active'); tabs.find(item+':first').addClass('show'); tabs.find(list).click(function(){ var $this = $(this); var i = tabs.find(block).find('.show').index(); var n = $this.index(); $this.addClass('active').siblings('.active').removeClass('active'); tabs.find(item).eq(n).addClass('show'); if(n > i){ tabs.find(block).stop().animate({'left':'-'+width+'px'},600,'easeOutCubic',function(){ tabs.find(block).css('left','0px'); tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); }else{ tabs.find(block).css('left','-'+width+'px').stop().animate({'left':0},600,'easeOutCubic',function(){ tabs.find(item).eq(n).siblings('.show').removeClass('show'); }); } }); } </script> </head> <body> <p class="tabs"> <p class="tabs_item"> <p class="list_item">list item 1</p> <p class="list_item">list item 2</p> <p class="list_item">list item 3</p> <p class="list_item">list item 4</p> <p class="list_item">list item 5</p> <p class="list_item">list item 6</p> </p> <p class="clear"> </p> <p class="tabs_block"> <p class="list_block">list block 1</p> <p class="list_block">list block 2</p> <p class="list_block">list block 3</p> <p class="list_block">list block 4</p> <p class="list_block">list block 5</p> <p class="list_block">list block 6</p> </p> </p> <script type="text/javascript"> jQuery(document).ready(function(){ var myTabs = new Tabs('.tabs','.list_item','.tabs_block','.list_block',jQuery); }); </script> <p style="text-align:center">更多代码请访问:<a href="http://www.jb51.net" target="_blank">脚本之家</a></p> </body> </html>
In the code we quoted Baidu’s jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
Related recommendations:
Detailed explanation of js to determine whether the content area is scrolled to the bottom
JavaScript implementation of table scrolling and paging tutorial
The above is the detailed content of Detailed analysis of JS implementation of label scrolling switching effect. For more information, please follow other related articles on the PHP Chinese website!