js實現(xiàn)點小圖看大圖效果的思路及示例代碼

更新時間：2013年10月28日 14:55:31 作者：

點小圖看大圖的效果想必很多的朋友都有見到過吧，下面有個不錯的示例，感興趣的朋友可以參考下

DOM：就是用JavaScript操作HTML節(jié)點。

知識點：

將HTML變成DOM樹

看到HTML會畫DOM樹。

創(chuàng)建節(jié)點，添加節(jié)點，刪除節(jié)點

varnodeObj = document.createElement(“節(jié)點名”); //創(chuàng)建元素節(jié)點

document.createTextNode(“文本”); //創(chuàng)建文本節(jié)點

父節(jié)點.appendChild(子節(jié)點); //把子節(jié)點添加到父節(jié)點下

父節(jié)點.removeChild(子節(jié)點);

//獲得節(jié)點

document.getElementById(“id號”);

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

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

//獲得子元素的節(jié)點

父節(jié)點.childNodes

父節(jié)點.firstChild

父節(jié)點.lastChild

//節(jié)點的屬性

nodeType 1元素節(jié)點 2屬性節(jié)點 3文本節(jié)點

nodeName 元素節(jié)點使用，返回標簽名的大寫字符串

nodeValue 文本節(jié)點使用，返回或設置文本

//獲得兄弟節(jié)點

當前節(jié)點.nextSiblings

設置節(jié)點的屬性

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

節(jié)點.getAttribute(屬性名);

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

//一般做法，可以設置或獲取

節(jié)點.屬性名

設置文本

文本節(jié)點.nodeValue=文本;

案例：點擊小圖看大圖

復制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta charset="gb2312" /> 
<style type="text/css"> 
body{ 
background-color:pink; 
} 
#div{ 
/*border:1px solid green;*/ 
margin:40px auto; 
width:900px; 
} 
#ul li{ 
float:left; 
margin-right:10px; 
list-style-type:none; 
} 
p{ 
background-color:silver; 
width:50%; 
margin:0 auto; 
top:10px; 
text-align:center; 
} 
#divShow{ 
/*border:1px solid red;*/ 
width:640px; 
height:400px; 
margin:10px auto; 
clear:both; 
} 
</style> 
</head> 
<body> 
<div id="div"> 
<ul id="ul"> 
<li> 
<a href="imgs/0.jpg"> 
<img src="imgs_small/0.jpg" title="圖片111"></img> 
</a> 
</li> 
<li> 
<a href="imgs/1.jpg"> 
<img src="imgs_small/1.jpg" title="圖片222"></img> 
</a> 
</li> 
<li> 
<a href="imgs/2.jpg"> 
<img src="imgs_small/2.jpg" title="圖片333"></img> 
</a> 
</li> 
<li> 
<a href="imgs/6.jpg"> 
<img src="imgs_small/6.jpg" title="圖片444"></img> 
</a> 
</li> 
<li> 
<a href="imgs/4.jpg"> 
<img src="imgs_small/4.jpg" title="圖片555"></img> 
</a> 
</li> 
</ul> 
</div> 
</body> 
</html> 
<script type="text/javascript"> 
//創(chuàng)建一個div節(jié)點 
var divShow = document.createElement("div"); 
//設置div的id屬性 
divShow.setAttribute("id","divShow"); 
//創(chuàng)建一個img節(jié)點 
var img = document.createElement("img"); 
//設置img的id屬性 
img.setAttribute("id","img"); 
//設置img的src屬性 
img.setAttribute("src","imgs/face.jpg"); 
//將img節(jié)點添加到div下 
divShow.appendChild(img); 
//創(chuàng)建文本說明標簽p 
var p = document.createElement("p"); 
p.setAttribute("id","p"); 
p.appendChild(document.createTextNode("說明")); 

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


//為元素添加單擊事件 
//節(jié)點對象.事件名 = new function(){}; 

//得到所有的<a>標簽 
var alist = document.getElementById("div").getElementsByTagName("a"); 

for(var i = 0;i < alist.length; i++){ 
//當鼠標點擊時切換圖片 
alist[i].onclick = function(){ 
//this就表示當前被點擊的節(jié)點 
//點誰獲得誰的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=title; 

//取消<a>標簽的跳轉(zhuǎn) 
return false; 
} 

//當鼠標稱上去的時候切換圖片 
alist[i].onmousemove = function(){ 
//this就表示當前被點擊的節(jié)點 
//點誰獲得誰的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=title; 

//取消<a>標簽的跳轉(zhuǎn) 
return false; 
} 
} 
</script> 