Javascript版显示相应图片的详细信息

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>

View Code

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>

View Code

4. 显示结果：

一个JS版的例子就好了，大家可以尝试一下 :).