JS——側(cè)欄導(dǎo)航點(diǎn)擊滑入滑出效果

對(duì)于定位的側(cè)欄導(dǎo)航點(diǎn)擊滑入滑出這一效果，我想很多人都明白原理，并且很簡(jiǎn)單的就能運(yùn)用JS+Jquery就能做出。而且是一個(gè)非常常見(jiàn)的簡(jiǎn)單效果。在此呢，小碼哥只是為了自己以后能夠翻看，還有就是給那些剛?cè)腴Tjavascript的新人們一點(diǎn)啟發(fā)。

作為入門javascript的人來(lái)說(shuō)，明白一個(gè)效果是怎么實(shí)現(xiàn)的尤為重要。即原理是怎么回事尤為重要！小碼哥昨天在路上偶遇一應(yīng)屆畢業(yè)生，剛從青島來(lái)北京找工作。是學(xué)計(jì)算機(jī)的，C及C++起步，由此基礎(chǔ)，我說(shuō)你學(xué)什么語(yǔ)言都有優(yōu)勢(shì)。必定邏輯基礎(chǔ)有了不是??？

廢話不說(shuō)了，直接上碼：

HTML代碼：

<div class="sidebar">

<div class="side_btn1 side_btn"><a class="s_btn1" href="#" title="點(diǎn)擊彈出"></a></div>

<div class="side_btn2 side_btn">

    <a class="s_btn2" href="#" title="點(diǎn)擊隱入"></a>

    </div>

<div class="side_main">

    <a class="side_hd" href="#" title=""></a>

        <ul class="side_nav">

        <li class="li1"><a href="#" title="">老友回歸領(lǐng)彈藥</a></li>

            <li class="li1"><a href="#" title="">軍功翻倍贈(zèng)彩蛋</a></li>

            <li class="li1"><a href="#" title="">坦克模式送武器</a></li>

            <li class="li1"><a href="#" title="">集齊碎片兌豪禮</a></li>

            <li class="li1"><a href="#" title="">全新八星預(yù)先售</a></li>

            <li class="li1"><a href="#" title="">永久武器充值抽</a></li>

            <li class="li1"><a href="#" title="">微博轉(zhuǎn)發(fā)抽大獎(jiǎng)</a></li>

            <li class="li1"><a href="#" title="">偶像為你而主演</a></li>

            <li class="li1"><a href="#" title="">呼朋喚友贏好禮</a></li>

        </ul><!--side_nav-->

    </div><!--.side_main-->

</div><!--.sidebar-->

CSS代碼：

/*S　sidebar*/

.sidebar{width:200px;padding:100px 0 0 0;height:100%;position:fixed;left:-200px;top:0;background:#0e0e0e;_position:absolute;_height:1275px;z-index:999;}

.sidebar .side_btn{position:absolute;width:62px;height:153px;right:-57px;top:320px;}

.sidebar .side_btn a{display:block;width:62px;height:153px;}

.sidebar .side_btn2{display:none;}

.sidebar .side_btn1 .s_btn1{background:url(../p_w_picpaths/sidebar-btn.png) 0 0;}

.sidebar .side_btn2 .s_btn2{background:url(../p_w_picpaths/sidebar-btn.png) -62px 0;}

.side_main{width:179px;margin:0 auto;}

.side_main .side_hd{display:block;width:179px;height:61px;background:url(../p_w_picpaths/sidebar-hd.jpg);}

.side_main .side_nav{width:100%;margin-top:50px;}

.side_main .side_nav li a{display:block;width:179px;height:51px;background:url(../p_w_picpaths/sidebar-bg.png) 0 0;text-align:center;line-height:51px;font-size:15px;color:#e6c1a7;}

.side_main .side_nav li a:hover{background:url(../p_w_picpaths/sidebar-bg.png) 0 -51px;color:#ffce4a;}

JS代碼：

/*左側(cè)導(dǎo)航*/

$('.side_btn1').click(function(){

$('.sidebar').animate({left:"0px"},1000,function(){

$('.side_btn1').hide();

$('.side_btn2').show();

});

});

$('.side_btn2').click(function(){

$('.sidebar').animate({left:"-200px"},1000,function(){

$('.side_btn2').hide();

$('.side_btn1').show();

});

});

配圖：

load-btn.png

sidebar-btn.png

sidebar-hd.jpg

這是其中用到的圖片，及按鈕背景圖。

如果不想用上述圖片的，可以根據(jù)代碼中圖片的尺寸，自己換用其他圖片。

再有就是，在該效果中，涉及到了JS Jquery中的動(dòng)畫animate方法。不了解的碼農(nóng)們希望能自己學(xué)習(xí)！

其中原理就是控制模塊的left值。

希望能對(duì)大家有所幫助。哇嘎嘎