這次給大家帶來JS實現標簽滾動切換，JS實現標簽滾動切換的注意事項有哪些，下面就是實戰案例，一起來看一下。
<!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>在代碼中我們引用了百度的jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！
推薦閱讀：
vue實現鍵盤效果
node.js的路由中間件ge和post請求使用詳解
Bootstrap模態框多次彈出提交BUG
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
