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

2024-05-06 15:53:43

字體：大中小

供稿：網(wǎng)友

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

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

知識點(diǎn)：

將HTML變成DOM樹

看到HTML會畫DOM樹。

創(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號”);

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>
<ul>
<li>
<a href="imgs/0.jpg">
<img src="imgs_small/0.jpg" title="圖片222"></img>
</a>
</li>
<li>
<a href="imgs/2.jpg">
<img src="imgs_small/2.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)建文本說明標(biāo)簽p
var p = document.createElement("p");
p.setAttribute("id","p");
p.appendChild(document.createTextNode("說明"));

//得到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)對象.事件名 = 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)誰獲得誰的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)誰獲得誰的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>