Page1 左側邊左右滑動的面板
HTML & CSS 部份 【結果如區段一左側的滑動面板】
<div id="ADpanel">
<div id="ADpanelBtn"> 課程大綱簡介</div>
<ol>
<li>認識網頁語言</li>
<li>認識JavaScript<br>了解程式基本語法</li>
<li>認識jQuery</li>
<li>jQuery的物件控制</li>
<li>jQuery的基本動畫</li>
<li>jQuery的自定動畫</li>
<li>jQ的AJAX載入技術</li>
</ol>
</div>
<style>
#ADpanel{ position:absolute; width:220px; min-height:250px;
left:0; top:150px; background-color:#d0a2fa; z-index:999;
font-size: 15px; font-family:'cwTeXHei', sans-serif;
box-shadow:5px 5px 10px #000; display:none; }
#ADpanelBtn{ position:absolute; width:20px; height:100%;
right:-40px; top:0; background-color:#8951bc;
padding:0 10px; cursor:pointer;
box-shadow:5px 5px 10px #000;
text-align:center; font-size:20px; color:#FFF; }
#ADpanel ol{ padding:30px 20px 20px 40px; list-style-type:decimal; }
#ADpanel ol li{ padding-bottom:5px; list-style-type:decimal; }
</style>
JavaScript & jQuery 部份
<script>
//變數宣告區==========================================================
//偵測取得page1中#ADpanel的寬度,乘上-1表示往左移出的距離
var page1ADpanelLeft = $('#ADpanel').innerWidth()*-1;
//環境初始設計=========================================================
//page1中ADpanel的動畫(淡入→滑出)
$('#ADpanel').fadeIn(2000)
.animate({left:page1ADpanelLeft},1000,'easeOutQuint');
//滑鼠互動效果#########################################################
//設計page1中#ADpanel的滑出與滑入=======================================
$('#ADpanelBtn').click(function(){
if( $('#ADpanel').offset().left < 0 ){
$('#ADpanel').animate({left:0},1000,'easeOutQuint');
}else{
$('#ADpanel').animate({left:page1ADpanelLeft},1000,'easeOutElastic')
}
});
</script>