跳到主要內容
今天在 Code Pen 試著寫出 http://codepen.io/floraya/pen/yNZKWq?editors=0010 因此做個重點整理,歸納如下:

HTML:(內容簡單明白 省略...)

CSS:
*{margin:0;padding:0;}

body {
   overflow: hidden;  // 讓內容不要跑出 body 外
 }

.nav{
   position:fixed; // 這樣導覽列才會固定住(重要)
}

li{
....
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5) inset, -1px -1px 1px rgba(0, 0, 0, 0.5) inset;  // 導覽列被選中設定
list-style-type:none; // 隱藏導覽列 li
}

h1{
  font-size:60px;
  color:ghostwhite;
  text-shadow:0px 0px 15px black;  // 頁面(Page1...)陰影功能
}

JQuery:
var num_li = $("li").length  // 得到 li 數目
 $(window).mousewheel(function(e) {  
    $("html,body").stop();
    ...
     if (e.deltaY == -1) {

     $("body").animate({
      "scrollTop": $(".p0" + n).offset().top      // 使用動畫 scrollType 方式切換至其它頁面
    }, ...


    //根據捲軸的位置改變右方導覽列游標的顏色
    $(window).scroll(function() {
    ...
   
    for (i = 0; i <= num_li; i++) {
     ...
    $(".nav li:eq(" + i + ")").click({
      id: i
    }, function(e) {
    ....
    page = e.data.id + 1;

$(window).resize(function() {
    center()
  })

   //計算導覽列垂直置中的高度
  function center() {
    pos = $(window).height() / 2 - $(".nav").height() / 2
    $(".nav").css("top", pos)
  }

這是我抄寫後的位置:http://codepen.io/wuk/pen/XKbzPQ  (若有侵權,還請通知刪除)

留言

這個網誌中的熱門文章

C# 中 List 複製內容到另一個 List 的幾種方法

簡單又實用 ^ ^ * 第一種透過 .ToList( ) 方法:  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2 = List1.ToList( ); * 第二種方式在建立物件時複製前一個 List  List<string> List1 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List<string> List2 = new List<string>(List1); * 第三種方法新的List 中使用 AddRange( ) 方法  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2.AddRange(List1); 另可使用 List1.GetRange(Start, End) 來複製不固定大小(但不包含End)的內容

無效的回傳或回呼引數。已在組態中使用 或在網頁中使用 <%@ Page EnableEventValidation="true" %> 啟用事件驗證

寫手機網頁 使用 Client 端的 jquery mobile 時 button 都會比較長,但改用 asp::Button 時發現按鈕大小卻變了,W3C 建議使用 jquery mobile Button 時,儘量使用<a href="#" data-role="button" > ,因此改用 asp::LinkButton 後果然解決了 Button 長度問題,只可惜按下去後,依然有點淚流滿面如下。後來拜求 google 大大,找到了原因及解法如下: 開啓了資料回傳安全驗證功能(EnableEventValidation 為 true),導致錯誤訊息產生。如果必須要驗證資料,則必須使用 ClientScriptManager.RegisterForEventValidation 註冊控制項或直接在頁面.aspx上端 <%Page ... EnableEventValidation = "false"> ,那如果全部頁面都不想驗證,那請在 web.config 下找到 <configuration>      <system.web>       <pages  enableEventValidation ="false" >        ....       </page>       .... </configuration> 嗯  博大精深  ^^ 收工回家去............................

JQUERY 中使用 val( ) 或 text( ) 來改變內容

就字眼看來兩者差別不太... 簡單的說 TextBox 利用 val( ),而其它的控制項元件則用 text( ) 底下範例可跑跑看或ID 對調實驗,很快就看出差別了... HTML: <input type="text" id="txtinupt" value="TEXTBOX"/> <label id="lblid">LABEL</label> <button onclick="TestFunc()">OK</button> JS: function TestFunc(){   $('#lblid').text("12345")   $('#txtinput').val("99999");   $('#lblid').focus();   console.log('Function End') }