快捷導(dǎo)航

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

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

點(diǎn)小圖看大圖的效果想必很多的朋友都有見(jiàn)到過(guò)吧，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下

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

知識(shí)點(diǎn)：

將HTML變成DOM樹(shù)

看到HTML會(huì)畫(huà)DOM樹(shù)。

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

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

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

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

父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn));

//獲得節(jié)點(diǎn)

document.getElementById(“id號(hào)”);

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

父節(jié)點(diǎn).getElementsByTagName(“html的標(biāo)簽名”)[0];

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

父節(jié)點(diǎn).childNodes

父節(jié)點(diǎn).firstChild

父節(jié)點(diǎn).lastChild

//節(jié)點(diǎn)的屬性

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

nodeName 元素節(jié)點(diǎn)使用，返回標(biāo)簽名的大寫字符串

nodeValue 文本節(jié)點(diǎn)使用，返回或設(shè)置文本

//獲得兄弟節(jié)點(diǎn)

當(dāng)前節(jié)點(diǎn).nextSiblings

設(shè)置節(jié)點(diǎn)的屬性

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

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

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

//一般做法，可以設(shè)置或獲取

節(jié)點(diǎn).屬性名

設(shè)置文本

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

案例：點(diǎn)擊小圖看大圖

復(fù)制代碼代碼如下:

 
<!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)建一個(gè)div節(jié)點(diǎn) 
var divShow = document.createElement("div"); 
//設(shè)置div的id屬性 
divShow.setAttribute("id","divShow"); 
//創(chuàng)建一個(gè)img節(jié)點(diǎn) 
var img = document.createElement("img"); 
//設(shè)置img的id屬性 
img.setAttribute("id","img"); 
//設(shè)置img的src屬性 
img.setAttribute("src","imgs/face.jpg"); 
//將img節(jié)點(diǎn)添加到div下 
divShow.appendChild(img); 
//創(chuàng)建文本說(shuō)明標(biāo)簽p 
var p = document.createElement("p"); 
p.setAttribute("id","p"); 
p.appendChild(document.createTextNode("說(shuō)明")); 

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


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

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

for(var i = 0;i < alist.length; i++){ 
//當(dāng)鼠標(biāo)點(diǎn)擊時(shí)切換圖片 
alist[i].onclick = function(){ 
//this就表示當(dāng)前被點(diǎn)擊的節(jié)點(diǎn) 
//點(diǎn)誰(shuí)獲得誰(shuí)的href和title的值 
var href = this.getAttribute("href"); 
var img = this.getElementsByTagName("img")[0]; 
var title = img.getAttribute("title"); 

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

//修改p標(biāo)簽的文本 
var p = document.getElementById("p"); 
p.firstChild.nodeValue=title; 

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

//當(dāng)鼠標(biāo)稱上去的時(shí)候切換圖片 
alist[i].onmousemove = function(){ 
//this就表示當(dāng)前被點(diǎn)擊的節(jié)點(diǎn) 
//點(diǎn)誰(shuí)獲得誰(shuí)的href和title的值 
var href = this.getAttribute("href"); 
var img = this.getElementsByTagName("img")[0]; 
var title = img.getAttribute("title"); 

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

//修改p標(biāo)簽的文本 
var p = document.getElementById("p"); 
p.firstChild.nodeValue=title; 

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