原生js Tab選項卡標簽滑動帶滾動條的內容滾動切換顯示代碼



152 607 203



特效描述:Tab選項卡 標簽滑動 帶滾動條內容 滾動切換,

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/event.js"></script>
<script type="text/javascript" src="js/tween.js"></script>

3. HTML代碼

<div class="tabmain">
	<div id="outerWrap">
		<div id="sliderParent"></div>
		<div class="blueline" id="blueline" style="top: 0px; "></div>
		<ul class="tabGroup">
			<li class="tabOption selectedTab">JavaScript培訓</li>
			<li class="tabOption">主體課程</li>
			<li class="tabOption">高端課程</li>
			<li class="tabOption">就業傳奇</li>
			<li class="tabOption">珠峰學生會</li>
			<li class="tabOption">講師招聘</li>
			<li class="tabOption">遠程教育</li>
		</ul>
		<div id="container">
			<div id="content">
				<div class="tabContent selectedContent">
					<!-- 1JavaScript培訓:優勢 -->
					<h3 style="">我們專注JavaScript培訓</h3>
					<dl>
						<dt><span class="high">教育理念:</span></dt>
						<dd>認識到每個人的優勢和價值,進行不同的指導和引導、推薦到更適合的平臺。我們不僅僅是努力,不僅僅是傳授技術,更重要的是:<span class="colorange">我們是發現你的伯樂!</span></dd>
					</dl>
					<dl>
						<dt><span class="high">傳奇就業:</span></dt>
						<dd><p>超過50%的學員工資翻倍或進入百度、新浪、騰訊等知名公司!</p></dd>
					</dl>
					<dl>
						<dt><span class="high">強悍課程:</span></dt>
						<dd><p>原生javaScript、算法及編程思想、設計模式、Ajax后臺技術,HTML5+CSS3移動端客戶端開發,Node.js、jQuery、AngularJS、Backbone.js框架講解 </p>
						</dd>
						<dd><p><a target="_blank" class="fbold colorange" href="http://www.17sucai.com">查看2014年珠峰培訓JavaScript培訓課程大綱</a></p></dd>
						<dd><p><img src="images/js.png" alt=""></p></dd>
					</dl>
					<dl>
						<dt><span class="high">特色</span></dt>
						<dd>
						<p><a href="###">自編的針對性教材</a><a href="http://www.17sucai.com">超過300講深度視頻</a><a href="###">海量面試題講解</a><br>
						<a href="###">直接進百度等公司的推薦機會</a></p>
						</dd>
					</dl>
				</div>
				<div class="tabContent">
					<!-- 3 主體課程 -->
					<h3>內容:全面、系統、深入的JavaScript培訓課程</h3>
					<dl>
						<dt>知識點縱向大綱:</dt>
						<p><a target="_blank" href="http://www.17sucai.com">查看2014年珠峰培訓JavaScript課程大綱</a></p>
					</dl>
					<dl>
						<dt class="high">重點模塊式課程大綱</dt>
						<dd>1、實用至上,高效為王的DOM庫(單例模式)</dd>
						<dd>2、比jQuery動畫還精彩的TWEEN算法動畫庫</dd>
						<dd>3、使用觀察者設計模式,從原理入手的事件庫</dd>
						<dd>4、開發自己的Ajax庫</dd>
						<dd>5、模塊化開發之一:選項卡框架</dd>
						<dd>6、模塊化開發之二:可擴展自定義事件的完美拖拽框架</dd>
						<dd>7、模塊化開發之三:彈出層框架</dd>
					</dl>
					<dl>
						<dt class="high">特色</dt>
						<dd>
						<p><a href="###">自己編寫的教材</a><a href="http://www.17sucai.com">超過300講的視頻</a><a href="###">海量面試題講解</a></p>
						<p><a href="###">直接進百度等公司的推薦機會</a></p>
						</dd>
					</dl>
				</div>
				<div class="tabContent">
					<h3>把JavaScript進行到底!</h3>
					<dl>
						<dt>最大亮點:</dt>
						<dd>主流的、引領前沿的新技術,邀請知名公司的前端技術大牛講解的饕餮大餐,可謂是群星薈萃!我們的目標就是:以珠峰為起點,讓你飛的更高!</dd>
					</dl>
					<dl>
						<dt>高端課程:</dt>
						<dd>
						<p>1、HTML5移動端開發</p>
						<p>2、CSS3及響應式布局</p>
						<p>3、Node.js</p>
						<p>4、MVC富客戶端開發</p>
						<p>5、angularJS框架</p>
						<p><img src="images/gdkc.png" alt=""></p>
						</dd>
					</dl>
				</div>
				<div class="tabContent">
					<!-- 就業傳奇 -->
					<h3>就業好才是硬道理</h3>
					<dl>
						<dt>就業是一個培訓班最有說服力的結果</dt>
						<dd>
						<p>網站做的再好,老師吹的再玄乎,看了就業后的選擇,才是理性選擇。</p>
						</dd>
					</dl>
					<dl>
						<dt>奇跡是努力的代名詞:就業背后是汗水.</dt>
						<dd>以強悍的課程體系為依托,以珠峰同學會為人脈。看一個培訓機構的就業,是對一個培訓機構最理性的評價。就業不好的培訓班,都是在騙錢!!</dd>
					</dl>
					<dl class="witness">
						<dt>奇跡的見證:</dt>
						<dd>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com"><em>我和我的小伙伴們都驚呆了:</em>2014新年伊始,四個同學入職進百度</a></p>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com"><em>學完之后工資真的能翻一翻嗎?</em>這已經不是個例</a></p>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com"><em>逆天了:</em>一個班上70%的同學工資翻倍或進百度搜狐等公司</a></p>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com">看我們有多少同學在百度新浪網易騰訊這些大公司</a></p>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com"><em>看我們的學員有多牛:</em>應屆畢業生,一樣也成為百度正式員工</a></p>
						<p><span class="ele"></span><a target="_blank" href="http://www.17sucai.com"><em>我們的在線培訓同樣給力:</em>上海美女月薪超10K進外企</a></p>
						</dd>
					</dl>
				</div>
				<div class="tabContent">
					<h3>珠峰學生會,大家好才是真的好</h3>
					<dl>
						<dt>學生會的昨天</dt>
						<dd>
						<p>珠峰的學生永遠是珠峰最寶貴的資源,是珠峰培訓發展和壯大的依托。昨天,他們陪珠峰從創業到發展,他們沒有嫌棄那個弱小珠峰,他們沒有嫌棄那個像農村大叔一樣的珠峰老師,沒有嫌棄那兩間簡陋的教室,一起走過最艱難的歲月。</p>
						</dd>
					</dl>
					<dl>
						<dt>學生會的今天</dt>
						<dd>
						<p>今天,同學們遍布北京互聯網公司,在百度、騰訊、新浪、搜狐等公司的就有一百多人。珠峰培訓傳統,一向是學習上老同學帶新同學,在工作機會上老同學推薦新同學.正因為廣大同學,珠峰培訓才有了這么豐富的講師資源,才有了更多更廣的就業渠道。</p>
						</dd>
					</dl>
					<dl>
						<dt>學生會的明天</dt>
						<dd>
						<p>明天,我們會更好!!珠峰和所有同學共同成長!!我們在一起戰斗,不孤單!</p>
						</dd>
					</dl>
					<p><span class="high" style="margin:0 10px;">不定期的組織活動</span><span class="high" style="margin:0 10px;">前沿技術分享</span><span class="high" style="margin:0 10px;">工作的交流推薦平臺</span><span class="high" style="margin:0 10px;">展示自己的機會</span></p>
					<p><a>學生是珠峰的信仰。每一位同學都是佛,我只是一位拜佛人!</a></p>
				</div>
				<div class="tabContent">
					<!--  招聘講師 -->
					<h3>珠峰培訓需要優秀的你加入</h3>
					<dl>
						<dt>招聘兼職講師</dt>
						<dd>長期招聘HTML5移動端開發講師、node.js講師、其它經驗豐富的JS開發講師</dd>
					</dl>
					<dl>
						<dt>招聘要求:</dt>
						<dd> 1、有一顆慈悲心。佛說:知眾生之苦,勇入苦海,以救眾生出苦海為樂,是慈悲心。報班的同學,多數沒有編程基礎,講師應深刻體會初學者的心理,耐心的有針對性的鼓勵、講解和輔導!</dd>
						<dd>2、有一顆平等舍與的心。報班的同學成績不一,對成績好的莫偏愛,對成績不好的冷淡。而應該是讓成績好的更上一層樓,讓成績不好的有信心提高自己。</dd>
						<dd>3、有扎實的代碼基本功,豐富的開發經驗</dd>
					</dl>
					忌浮燥,忌功利,態度比技術更重要。當老師,不是給自己找存在感,而是通過讓別人更好的存在,來成就自己!
					<dl>
						<dt>薪資待遇</dt>
						<dd>按不同級別確定優厚的日薪,獎金另有計算方案。</dd>
						<dd>需免費試講一天后,評估上崗。具體標準,請聯系<a href="http://www.17sucai.com" target="blank">QQ咨詢:123456789</a></dd>
					</dl>
				</div>
				<div class="tabContent">
					<!-- 遠程教育 -->
					<h3>17素材網(www.17sucai.com)</h3>
					<dl>
						<dt>遠程教育</dt>
						<dd>網站正在升級中,敬請期待</dd>
						<dt>17素材網</dt>
						<dd>17素材網專注于提供免費素材下載,其內容涵蓋設計素材,PSD素材,矢量素材,圖片素材,圖標素材,設計字體等免費素材.下載免費素材盡在17素材網免費素材網</dd>
						<dt>17素材網</dt>
						<dd>17素材網專注于提供免費素材下載,其內容涵蓋設計素材,PSD素材,矢量素材,圖片素材,圖標素材,設計字體等免費素材.下載免費素材盡在17素材網免費素材網</dd>
						<dt>17素材網</dt>
						<dd>17素材網專注于提供免費素材下載,其內容涵蓋設計素材,PSD素材,矢量素材,圖片素材,圖標素材,設計字體等免費素材.下載免費素材盡在17素材網免費素材網</dd>
						<dt>17素材網</dt>
						<dd>17素材網專注于提供免費素材下載,其內容涵蓋設計素材,PSD素材,矢量素材,圖片素材,圖標素材,設計字體等免費素材.下載免費素材盡在17素材網免費素材網</dd>
					</dl>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
var container = document.getElementById('container');
var content = document.getElementById('content');
var oDivs = DOM.children(content, "div");
oDivs[0].st = 0;
for (var i = 1; i < oDivs.length; i++) {
    oDivs[i].st = oDivs[i].offsetTop;
}
var oLis = DOM.getElesByClass("tabOption");
var flag = 0;
var upFlag = oLis.length;; (function() {
    function fn(e) {
        e = e || window.event;
        if (e.wheelDelta) {
            var n = e.wheelDelta;
        } else if (e.detail) {
            var n = e.detail * -1;
        }
        if (n > 0) {
            container.scrollTop -= 12;
        } else if (n < 0) {
            container.scrollTop += 12;
        }
        slider.style.top = container.scrollTop * container.offsetHeight / content.offsetHeight + "px";
        slider.offsetTop * (content.offsetHeight / container.offsetHeight);
        var st = container.scrollTop;
        if (st > this.preSt) {
            for (var j = 0; j < oLis.length; j++) {
                if (st < oDivs[j].st) break;
            }
            if (oLis[j - 2] && this.preLi !== j) {
                if ((j) > (flag + 1)) {
                    DOM.removeClass(oLis[j - 2], "selectedTab");
                    DOM.addClass(oLis[j - 1], "selectedTab");
                    animate(blueline, {
                        top: (j - 1) * 48
                    },
                    500, 2);
                }
            }
            flag = j - 1;
        } else if (st < this.preSt) {
            for (var j = oLis.length - 1; j >= 0; j--) {
                if (st > oDivs[j].st) break;
            }
            if (oLis[j + 2] && this.preLi !== j) {
                if (flag === undefined) return;
                if ((j) < (flag)) {
                    for (var k = 0; k < oLis.length; k++) {
                        DOM.removeClass(oLis[k], "selectedTab");
                    };
                    DOM.addClass(oLis[j + 1], "selectedTab");
                    animate(blueline, {
                        top: (j + 1) * 48
                    },
                    500, 2);
                    upFlag = j + 1;
                }
            }
        }
        this.preSt = st;
        if (e.preventDefault) e.preventDefault();
        return false;
    }
    container.onmousewheel = fn;
    if (container.addEventListener) container.addEventListener("DOMMouseScroll", fn, false);
    slider = document.createElement('span');
    slider.id = "slider";
    slider.style.height = container.offsetHeight * (container.offsetHeight / content.offsetHeight) + "px";
    sliderParent.appendChild(slider);
    on(slider, "mousedown", down);
    var blueline = document.getElementById("blueline");
    function changeTab() {
        var index = DOM.getIndex(this);
        for (var i = 0; i < oLis.length; i++) {
            DOM.removeClass(oLis[i], "selectedTab");
        }
        DOM.addClass(this, "selectedTab");
        animate(container, {
            scrollTop: oDivs[index].st
        },
        500, 1);
        var t = oDivs[index].st * container.offsetHeight / content.offsetHeight;
        animate(slider, {
            top: t
        },
        500);
        animate(blueline, {
            top: index * 48
        },
        500, 2);
    }
    var tabPannel1 = document.getElementById("outerWrap");
    var oLis = DOM.children(DOM.children(tabPannel1, "ul")[0], "li");
    for (var i = 0; i < oLis.length; i++) {
        oLis[i].onclick = changeTab;
    };
})();
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片滑動 圖片滑塊 文字滑動 文字滑塊 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子