js實作點小圖看大圖效果的思路及範例程式碼_javascript技巧

DOM：就是用JavaScript操作HTML節點。

知識點：

將HTML變成DOM樹

看到HTML會畫DOM樹。

建立節點，新增節點，刪除節點

varnodeObj = document.createElement(「節點名稱」); //建立元素節點
document .createTextNode(“文字”); //建立文字節點

父節點.appendChild(子節點); //把子節點加入父節點下

父節點.removeChild(子節點); //把子節點加入父節點下

父節點.removeChild(子節點);

//取得節點

document.getElementById(“id號”);

document.getElementsByTagName(“html的標籤名稱”)[0];

父節點.getElementsByTagName(“html的標籤名”)[0];

//取得子元素的節點

父節點.childNodes

父節點.firstChild

父節點.lastChild

//節點的屬性

nodeType 1元素節點2屬性節點3文字節點

nodedeName 元素節點使用，傳回標籤名的大寫字串

nodeValue 文字節點使用，傳回或設定文字

//取得兄弟節點

目前節點.nextSiblings
目前節點.nextSiblings


設定節點的屬性


節點.setAttribute(屬性名稱,值);

節點.getAttribute(屬性名稱);

p. setAttrubute(“style”,”color:red;font-size:20px;”);

//一般做法，可以設定或取得節點.屬性名稱


設定文字
文字節點.nodeValue=文字;

案例：點擊小圖看大圖

複製程式碼 程式碼如下:

標題>


主體{
背景顏色：粉紅色；
}
#div{
/*邊框：1px 純綠色；* /
邊距：40px auto;
寬度：900px;
}
#ul li{
float:left;
右邊距：10px;
列表樣式：無；
}
p{
背景顏色：銀色；
寬度：50%;
保證金：0 自動；
頂部：10px;
文字對齊：居中；
}
#divShow{
/*邊框:1px 純紅色;*/
寬度:640px;
高度：400px；
邊距：10px 自動
高度：400px;
邊距：10px 自動； ：兩者;
}
樣式>
頭>

• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  


• 
  
  
  
  

身體>


//建立一個div節點
var divShow = document.createElement("div");
//設定div的id屬性
divShow.setAttribute("id","divShow");
//建立一個img節點
var img = document.createElement("img");
//設定img的id屬性
img.setAttribute("id","img");
//設定img的src屬性
img.setAttribute("src","imgs/face.jpg");
//將img節點加入div下
divShow.appendChild(img);
//建立文字說明標籤p
var p = document.createElement("p");
p.setAttribute("id","p");
p.appendChild(document.createTextNode("說明")) ;

//取得HTML中的body節點
var body = document.getElementsByTagName("body")[0];
//將div加入body節點下
body. appendChild(divShow);
body.appendChild(p);//把p加入body下


//為元素新增點選事件
//節點物件.事件名= new function() {}；

//取得所有的標籤
var alist = document.getElementById("div").getElementsByTagName("a");

for(var i = 0;i //當滑鼠點擊時切換圖片
alist[i].onclick = function(){
//this就表示目前被點擊的節點
//點誰得到誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[ 0];
var title = img.getAttribute("title");

//修改img標籤的src屬性
var img = document.getElementById("img");
var img = document.getElementById("img");
img.setAttribute("src",href);

//修改p標籤的文字
var p = document.getElementById("p");
p.firstChild.nodeValue=標題；

//取消標籤的漫畫
return false;
}

//當滑鼠稱上去的時候切換圖片
alist[i].onmousemove = function(){
//這表示目前被點擊的節點
//點誰得到誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");

//修改img標籤的src屬性
var img = document.getElementById("img");
img.setAttribute("src",href);

//修改p標籤的文字
var p = document.getElementById("p" );
p.firstChild.nodeValue=標題；

//取消標籤的漫畫
return false;
}
}

腳本>