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:291577Durchsuche
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['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="//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!