Heim > Artikel > Web-Frontend > So implementieren Sie das Umschalten des Label-Scrollings in JS

So implementieren Sie das Umschalten des Label-Scrollings in JS

亚连Original: 2018-06-15 16:03:291628Durchsuche

In diesem Artikel erfahren Sie, wie Sie mithilfe von JS den Effekt des Scrollens nach dem Klicken auf die Artikelbezeichnung erkennen und es testen und lernen können.

Der JS-Effekt dieses Artikels besteht darin, den Effekt des folgenden Inhalts nach dem Scrollen zu erkennen, wenn die Maus auf das ITEM-Tag klickt. Schauen wir uns zunächst das Rendering nach dem Vorgang an.

Das Folgende ist der ursprüngliche laufende Code von 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>

Im Code haben wir Baidus JQuery zitiert

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

Das Obige ist Ich habe es für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Baidu-Suche mithilfe der JS-Technologie

So verwenden Sie die Cookie-Parser-Middleware in Express

Welche Rolle spielt getBoundingClientRect in js?

So implementieren Sie die Warenkorb-Ballparabel in Vue 2.0

AngularJS1.x-Anwendung nach React migrieren (ausführliches Tutorial)

Erklären Sie im Detail, wie Komponenten und ihre Funktionen in Vue.js verwendet werden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Umschalten des Label-Scrollings in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

中间件 jquery vue.js express Cookie JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js generiert HTML als Bilder und speichert sie lokalNächster Artikel：js generiert HTML als Bilder und speichert sie lokal

In Verbindung stehende Artikel

Mehr sehen