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版的例子就好了，大家可以尝试一下 :).

转载于:https://www.cnblogs.com/bennettwang00/p/JavascriptShowDetails.html

Javascript版-显示相应图片的详细信息相关推荐

Android 系统（163）---Gallery为何有的图片在详细信息里查看其分辨率与实际不一样？
[Gallery]为何有的图片在详细信息里查看其分辨率与实际不一样? 解释如下: Gallery往exif写的时候也是写从数据库中得到的宽高信息,而出现这种错误是由于在写exif时,其值是被故意写错的 ...
让iis7.5显示php错误的详细信息~
这两天在win7下调试php程序, 用的是fastcgi模式的,也不知这个模式到底怎么样, 但既然win7和win2008都默认支持这个模式, 那就应该是不错的, 而且php5.3以上版本也在win7 ...
根据非原图图片找到详细信息
(1)分析图片搜索相关信息从图片中可以看出这张照片是麦当劳,然后仔细读取图片中的文字,看见Arbang Alaf Restaurant以及jalan SS21/39,百度搜索发现这是一家餐厅名字跟j ...
javascript版购物网站图片轮转
前端时间刚学习javascript时做小项目是用到的,根据老师给的思路写的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
SYS Informer 完整显示系统、电脑软硬件详细信息
SYS Informer是个功能相当完整的系统资讯检测工具,它可以用来显示包括BIOS.CPU.主机板.显示卡.键盘.滑鼠.网路卡.音效卡. ..等等硬体设备的详细规格.型号与各种资讯及细节,更可显示 ...
ls：显示指定目录的详细信息
2019独角兽企业重金招聘Python工程师标准>>> 假定当前目录的结构如下: . ├── mm │ └── foo.txt └── mmm mm和mmm是目录,先看下面两个命令的 ...
剥开比原看代码17：比原是如何显示交易的详细信息的？
作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...
剥开比原看代码（十七）：比原是如何显示交易的详细信息的？
作者:freewind 比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchai ...
easyUI 展开DataGrid里面的行显示详细信息
http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...

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

Javascript版-显示相应图片的详细信息相关推荐

最新文章

热门文章