Home > Article > Web Front-end > JS implements label scrolling switching

JS implements label scrolling switching

php中世界最好的语言Original: 2018-04-13 15:28:331869browse

This time I will bring you JS to implement label scrolling switching. What are the precautions for JS to implement label scrolling switching? The following is a practical case, let's take a look.

<!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>
</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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

JS implements label scrolling switching

Related articles