JS implémente la commutation de défilement d'étiquettes-js tutoriel-php.cn

JS implémente la commutation de défilement d'étiquettes

php中世界最好的语言

Libérer： 2018-04-13 15:28:33

original

1918 Les gens l'ont consulté

Cette fois, je vais vous proposer JS pour implémenter la commutation de défilement d'étiquettes. Quelles sont les précautions pour que JS implémente la commutation de défilement d'étiquettes. Voici un cas pratique, jetons un coup d'œil.

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

Copier après la connexion

Dans le code, nous avons cité le jquery de Baidu

<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Vue implémente l'effet clavier

Explication détaillée de l'utilisation du middleware de routage ge et des requêtes de publication de node.js

La boîte modale Bootstrap apparaît plusieurs fois Soumettre un BUG

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!