JS實(shí)現(xiàn)標(biāo)簽滾動(dòng)切換效果
更新時(shí)間：2017年12月25日 10:36:50 投稿：laozhang
這篇文章給大家?guī)?lái)的是用JS實(shí)現(xiàn)item標(biāo)簽點(diǎn)擊后滾動(dòng)切換的效果，有興趣的朋友測(cè)試學(xué)習(xí)下吧。
本文的JS效果是在鼠標(biāo)點(diǎn)擊ITEM標(biāo)簽的時(shí)候，實(shí)現(xiàn)下方的內(nèi)容跟隨滾動(dòng)切換的效果，我們先來(lái)看下運(yùn)行后的效果圖。
以下是腳本之家原創(chuàng)的運(yùn)行代碼：
<!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實(shí)現(xiàn)的平滑滾動(dòng)選項(xiàng)卡</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">更多代碼請(qǐng)?jiān)L問(wèn)：<a href="http://www.dhdzp.com" 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í)下吧，感謝你對(duì)腳本之家的支持。
您可能感興趣的文章:
- js實(shí)現(xiàn)無(wú)縫滾動(dòng)雙圖切換效果
- js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁(yè)面效果(類(lèi)似360默認(rèn)頁(yè)面滾動(dòng)切換效果)
- js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
- js控制多圖左右滾動(dòng)切換效果代碼分享
- javascript 另一種圖片滾動(dòng)切換效果思路
- 簡(jiǎn)單實(shí)現(xiàn)js頁(yè)面切換功能
- js實(shí)現(xiàn)單一html頁(yè)面兩套css切換代碼
- echarts同一頁(yè)面中四個(gè)圖表切換的js數(shù)據(jù)交互方法示例
- velocity.js實(shí)現(xiàn)頁(yè)面滾動(dòng)切換效果
相關(guān)文章
其實(shí)在學(xué)習(xí)之前，就已經(jīng)用上了js，jquery和ajax，不過(guò)當(dāng)時(shí)不清楚這些的區(qū)別，就全都當(dāng)成js來(lái)看，然后別人一說(shuō)jquery，ajax都覺(jué)得好像很高級(jí)，等到自己學(xué)習(xí)的時(shí)候，倒是對(duì)這些更清楚了一點(diǎn)，下面就來(lái)寫(xiě)一下我的總結(jié)2016-01-01
這篇文章主要給大家詳細(xì)介紹了javascript中鼠標(biāo)滾輪事件，圖文并茂，十分的詳細(xì)，有需要的小伙伴可以參考下。2015-05-05
JavaScript實(shí)現(xiàn)動(dòng)態(tài)留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加
這篇文章主要為大家詳細(xì)介紹了OpenLayers3實(shí)現(xiàn)地圖鷹眼以及地圖比例尺的添加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js分頁(yè)腳本實(shí)現(xiàn)代碼。2009-05-05
這篇文章主要介紹了ES6 Promise對(duì)象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
javascript實(shí)現(xiàn)五星評(píng)分功能
這篇文章主要介紹了javascript實(shí)現(xiàn)五星評(píng)分功能，大家現(xiàn)在會(huì)見(jiàn)到許多五星評(píng)級(jí)，知道是如何實(shí)現(xiàn)的嗎？文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了如何在TypeScript中處理日期字符串，主要通過(guò)輸入日期字符串來(lái)改善開(kāi)發(fā)者的體驗(yàn)并減少潛在的錯(cuò)誤，下文實(shí)現(xiàn)操作的分享需要的小伙伴可以參考一下2022-04-04
javascript實(shí)現(xiàn)繼承的簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)繼承的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2015-07-07
JS實(shí)現(xiàn)的4種數(shù)字千位符格式化方法分享
這篇文章主要介紹了JS實(shí)現(xiàn)的4種數(shù)字千位符格式化方法分享,本文給出了4種千分位格式化方法并對(duì)它們的性能做了比較,需要的朋友可以參考下2015-03-03