|
首先感謝“楊中科”老師，免費(fèi)發(fā)布教學(xué)視頻；
老規(guī)矩，先上傳圖片素材；一共六張圖片，三大，三�。ù蟮膱D片大家可以把他下載下來，當(dāng)成手機(jī)屏保哦，由于圖片太大，我只讓他顯示200*300了 ）。
小圖片都是通過document.createElement("img") 創(chuàng)建的html標(biāo)簽
 
圖片上傳完了，下面就該是代碼了，代碼里都有注釋，所以在這里我就不白話了；直接看注釋就OK了；
 
 
<!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>
<style type="text/css">
.imgStyle
{
margin: 10px;
padding: 2px;
border: 1px solid #000;
}
</style>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "圖片1"], "Images/02_small.jpg": ["Images/02.jpg", "圖片2"], "Images/03_small.jpg": ["Images/03.jpg", "圖片3"] }; //Key:Value;
function LoadImg() {
//遍例小圖（Key）地址；
for (var smallImgPath in data) {
//動態(tài)創(chuàng)建一個img標(biāo)簽
var smallImg = document.createElement("img");
//動態(tài)添加Css樣式；imgStyle為樣式的類名；
smallImg.className = "imgStyle";
//給創(chuàng)建后的img賦值；（圖片路徑）
smallImg.src = smallImgPath;
//通過setAttribute改變大圖片的(相對)路徑;如果不這么寫下面取到的會是絕對路徑；
smallImg.setAttribute("a1", data[smallImgPath][0]);
smallImg.setAttribute("a2", data[smallImgPath][1]);
smallImg.onmousemove = function () {
//取大圖片的地址；
document.getElementById("bigImg").src = this.getAttribute("a1");
//取大圖片的標(biāo)題；
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
//獲取隱藏的層的id；
var showDiv = document.getElementById("showDiv");
//讓顯示的層的位置等于鼠標(biāo)的位置；
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
//顯示層；
showDiv.style.display = "block";
}
smallImg.onmouseout = function () {
document.getElementById("bigImg").src = this.getAttribute("a1");
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
var showDiv = document.getElementById("showDiv");
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
showDiv.style.display = "none";
}
//加載到body中；
document.body.appendChild(smallImg);
}
}
</script>
</head>
<body onload="LoadImg()">
<div id="showDiv" style="display: none; position: absolute;">
<img id="bigImg" src="" width="20%" height="20%" alt="" />
<p id="imgTitle">
</p>
</div>
</body>
</html>
| 
免費(fèi)注冊
發(fā)表于 2011-12-22 08:54