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['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>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 connexes :
Comment implémenter la recherche Baidu via la technologie JS
Comment utiliser le middleware d'analyse de cookies dans Express
Quel est le rôle de getBoundingClientRect dans js ?
Comment implémenter la parabole boule de panier dans vue 2.0
Migrer l'application AngularJS1.x vers React (tutoriel détaillé)
Expliquer en détail comment utiliser les composants et leurs fonctions dans Vue.js ?
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
