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

標題>


主體{
背景顏色：粉紅色；
}
#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;
}
}