JS實現(xiàn)標(biāo)簽滾動切換效果
更新時間：2017年12月25日 10:36:50 投稿：laozhang
這篇文章給大家?guī)淼氖怯肑S實現(xiàn)item標(biāo)簽點擊后滾動切換的效果，有興趣的朋友測試學(xué)習(xí)下吧。
本文的JS效果是在鼠標(biāo)點擊ITEM標(biāo)簽的時候，實現(xiàn)下方的內(nèi)容跟隨滾動切換的效果，我們先來看下運行后的效果圖。
以下是腳本之家原創(chuàng)的運行代碼：
<!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實現(xiàn)的平滑滾動選項卡</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>
<div class="tabs">
<div class="tabs_item">
<div class="list_item">list item 1</div>
<div class="list_item">list item 2</div>
<div class="list_item">list item 3</div>
<div class="list_item">list item 4</div>
<div class="list_item">list item 5</div>
<div class="list_item">list item 6</div>
</div>
<div class="clear"> </div>
<div class="tabs_block">
<div class="list_block">list block 1</div>
<div class="list_block">list block 2</div>
<div class="list_block">list block 3</div>
<div class="list_block">list block 4</div>
<div class="list_block">list block 5</div>
<div class="list_block">list block 6</div>
</div>
</div>
<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="http://m.fzitv.net" target="_blank">腳本之家</a></p>
</body>
</html>
在代碼中我們引用了百度的jquery
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
需要的朋友跟著學(xué)習(xí)下吧，感謝你對腳本之家的支持。
相關(guān)文章
其實在學(xué)習(xí)之前，就已經(jīng)用上了js，jquery和ajax，不過當(dāng)時不清楚這些的區(qū)別，就全都當(dāng)成js來看，然后別人一說jquery，ajax都覺得好像很高級，等到自己學(xué)習(xí)的時候，倒是對這些更清楚了一點，下面就來寫一下我的總結(jié)2016-01-01
這篇文章主要給大家詳細(xì)介紹了javascript中鼠標(biāo)滾輪事件，圖文并茂，十分的詳細(xì)，有需要的小伙伴可以參考下。2015-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)動態(tài)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
js分頁腳本實現(xiàn)代碼。2009-05-05
這篇文章主要介紹了ES6 Promise對象的含義和基本用法,結(jié)合實例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了javascript實現(xiàn)五星評分功能，大家現(xiàn)在會見到許多五星評級，知道是如何實現(xiàn)的嗎？文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了如何在TypeScript中處理日期字符串，主要通過輸入日期字符串來改善開發(fā)者的體驗并減少潛在的錯誤，下文實現(xiàn)操作的分享需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了javascript實現(xiàn)繼承的簡單實例的相關(guān)資料,需要的朋友可以參考下2015-07-07
JS實現(xiàn)的4種數(shù)字千位符格式化方法分享
這篇文章主要介紹了JS實現(xiàn)的4種數(shù)字千位符格式化方法分享,本文給出了4種千分位格式化方法并對它們的性能做了比較,需要的朋友可以參考下2015-03-03