Hi All,
分享一个通过JS来显示相应图片的详细信息。
需求：进入页面时，动态加载图片信息；当鼠标移动到某一图片上时，则显示该图片的大图片并显示相应说明信息；当鼠标移开图片时，清除新创建的元素。
1. 用HTML画好布局：
1 <body onload="initEvent()"> 2 <div id="peopleInfo" style="position:absolute; top:20%; left:30%;"> 3 <h2>人员信息：</h2> 4 </div> 5 </body>
2. 用CSS为新创建的元素的添加样式：
1 <style type="text/css"> 2 .newDiv { 3 position:absolute; 4 width:200px; 5 height:200px; 6 border: 1px solid blue; 7 } 8 .newImg { 9 position:absolute; 10 width:100px; 11 height:100px; 12 margin: 2px 2px; 13 } 14 .newlbName { 15 float:right; 16 color:red; 17 margin-right:40px; 18 margin-top: 20px; 19 } 20 .newlbHight { 21 float:right; 22 color:red; 23 margin-right:-42px; 24 margin-top: 50px; 25 } 26 .lbDescription { 27 position:absolute; 28 font: normal 24px Arial, Helvetica, sans-serif; 29 color:black; 30 top:110px; 31 left:20px; 32 padding: 8px 1px; 33 } 34 </style>
3. 用JS控制行为：
1 <script type="text/javascript"> 2 var data = { // 数据源 3 "/Imgs/katong_4_1440x900.jpg": ["苏童", "158cm", "温柔，委婉"], 4 "/Imgs/katong_2_1440x900.jpg": ["紫童", "172cm", "性格率真"], 5 "/Imgs/katong_5_1440x900.jpg": ["小倩", "165cm", "爱好广泛"], 6 "/Imgs/katong_3_1440x900.jpg": ["顺姬", "158cm", "美丽，大方"] 7 }; 8 9 function initEvent() { // load事件触发initEvent()方法 10 var div = document.getElementById("peopleInfo"); 11 var table = document.createElement("table"); 12 var count = 0; 13 for (var key in data) { // 动态加载图片详细 14 var tr, td, img; 15 var dataValue = data[key]; 16 td = document.createElement("td"); 17 img = document.createElement("img"); 18 img.id = count; 19 img.setAttribute("src", key); 20 img.setAttribute("alt1", key); 21 img.setAttribute("alt2", dataValue[0]); 22 img.setAttribute("alt3", dataValue[1]); 23 img.setAttribute("alt4", dataValue[2]); 24 img.width = '50'; 25 img.height = '50'; 26 img.onmouseover = function () { // 鼠标移动时动态创建相应图片的详细信息 27 // 动态创建的div，并设置其属性 28 var newDiv = document.createElement("div"); 29 newDiv.className = "newDiv"; 30 var x = window.event.clientX; 31 var y = window.event.clientY; 32 newDiv.style.top = y+"px"; 33 newDiv.style.left = x + "px"; 34 35 // 动态创建img，并设置相应属性 36 var newImg = document.createElement("img"); 37 newImg.className = "newImg"; 38 var imgPath = this.getAttribute("alt1").toString(); 39 newImg.src = imgPath; 40 var name = this.getAttribute("alt2").toString(); 41 var height = this.getAttribute("alt3").toString(); 42 var description=this.getAttribute("alt4").toString(); 43 44 // 动态创建label,显示姓名信息 45 var lbName = document.createElement("label"); 46 lbName.className = "newlbName"; 47 lbName.innerText = name; 48 newDiv.appendChild(lbName); 49 50 // 动态创建label,显示身高信息 51 var lbHight = document.createElement("label"); 52 lbHight.className = "newlbHight"; 53 lbHight.innerText = height; 54 newDiv.appendChild(lbHight); 55 56 // 动态创建label,显示描述信息 57 var lbDescription = document.createElement("label"); 58 lbDescription.className = "lbDescription"; 59 lbDescription.innerText = description; 60 newDiv.appendChild(lbDescription); 61 62 // 将创建的元素添加到新的div中 63 newDiv.appendChild(newImg); 64 document.body.appendChild(newDiv); 65 66 } 67 img.onmouseout = function () { //鼠标离开时，移出掉新创建的div元素 68 var divs = document.getElementsByTagName("div"); 69 for (var i = 0; i < divs.length; i++) 70 { 71 var div = divs[i]; 72 if (div.className == "newDiv") 73 { 74 document.body.removeChild(div); 75 } 76 } 77 } 78 79 td.appendChild(img); 80 if (count % 2 == 0) { // 设置换行 81 tr = document.createElement("tr"); 82 } 83 tr.appendChild(td); 84 table.appendChild(tr); 85 count++; 86 } 87 div.appendChild(table); 88 } 89 </script>
4. 显示结果：
一个JS版的例子就好了，大家可以尝试一下 :).