javascriptdom編程藝術網頁案例

包含瞭五個頁面,N多函數,完成工作有幻燈片,點擊顯示內容功能,圖片庫,表格優化,表單優化,我自己沒有寫最後表單的ajax
在博客上隻放瞭 js 函數代碼,是供自己溫習,想要學習建議閱讀書籍。
案例放在github,地址:https://github.com/UnaMaatin/javascript-dom

// Global

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

//與insertBefor方法對應
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

//追加 class名稱
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

//為導航鏈接動態添加 class=“here”
function highlightPage() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;  
  //獲取並遍歷
  var headers = document.getElementsByTagName('header');
  if (headers.length == 0) return false;
  var navs = headers[0].getElementsByTagName('nav');
  if (navs.length == 0) return false;

  var links = navs[0].getElementsByTagName("a");
  for (var i=0; i final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  //把函數設置成屬性,解決作用域問題,具體瞭解可參考書的第十章
  elem.movement = setTimeout(repeat,interval);
}


function prepareSlideshow() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("intro")) return false;
  //創建幻燈片元素準備相應鏈接
  var intro = document.getElementById("intro");
  var slideshow = document.createElement("p");
  slideshow.setAttribute("id","slideshow");
  var frame = document.createElement("img");
  //在此案例這個圖片是一個類似相框的背景圖,添加到創建的p上
  frame.setAttribute("src","images/frame.gif");
  frame.setAttribute("alt","");
  frame.setAttribute("id","frame");
  slideshow.appendChild(frame);
  //聲明:要做出幻燈片效果需要的圖片是幾張拼接在一起的
  var preview = document.createElement("img");
  preview.setAttribute("src","images/slideshow.gif");
  preview.setAttribute("alt","a glimpse of what awaits you");
  preview.setAttribute("id","preview");
  slideshow.appendChild(preview);
  //在指定子節點後面添加子節點
  insertAfter(slideshow,intro);
  //遍歷,使其移動到相應的位置上,調用movement函數傳入5毫秒的interval值
  var links = document.getElementsByTagName("a");
  for (var i=0; i

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *