Maison > Article > interface Web > Comment implémenter la commutation de défilement d'étiquettes dans JS

Comment implémenter la commutation de défilement d'étiquettes dans JS

亚连original: 2018-06-15 16:03:291623parcourir

Ce que cet article vous apporte, c'est d'utiliser JS pour réaliser l'effet du changement de défilement après avoir cliqué sur l'étiquette de l'élément. Les amis intéressés peuvent le tester et l'apprendre.

L'effet JS de cet article est d'obtenir l'effet du contenu ci-dessous suite au changement de défilement lorsque la souris clique sur la balise ITEM. Voyons d'abord le rendu après opération.

Ce qui suit est le code d'exécution original de Script House :

<!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[&#39;easeOutCubic&#39;] = 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+&#39;:first&#39;).addClass(&#39;active&#39;);
 tabs.find(item+&#39;:first&#39;).addClass(&#39;show&#39;);
 tabs.find(list).click(function(){
 var $this = $(this);
 var i = tabs.find(block).find(&#39;.show&#39;).index();
 var n = $this.index();
 $this.addClass(&#39;active&#39;).siblings(&#39;.active&#39;).removeClass(&#39;active&#39;);
 tabs.find(item).eq(n).addClass(&#39;show&#39;);
 if(n > i){
 tabs.find(block).stop().animate({&#39;left&#39;:&#39;-&#39;+width+&#39;px&#39;},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(block).css(&#39;left&#39;,&#39;0px&#39;);
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }else{
 tabs.find(block).css(&#39;left&#39;,&#39;-&#39;+width+&#39;px&#39;).stop().animate({&#39;left&#39;:0},600,&#39;easeOutCubic&#39;,function(){
  tabs.find(item).eq(n).siblings(&#39;.show&#39;).removeClass(&#39;show&#39;);
  });
 }
 });
}
</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(&#39;.tabs&#39;,&#39;.list_item&#39;,&#39;.tabs_block&#39;,&#39;.list_block&#39;,jQuery);
 });
</script>
<p style="text-align:center">更多代码请访问：<a href="//www.jb51.net" target="_blank">脚本之家</a></p>
</body>
</html>

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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus