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为新创建的元素的添加样式：

     <style type="text/css">

         .newDiv {

             position:absolute;

             width:200px;

             height:200px;

             border: 1px solid blue;

         }

         .newImg {

             position:absolute;

             width:100px;

             height:100px;

             margin: 2px 2px;

         }

         .newlbName {

             float:right;

             color:red;

             margin-right:40px;

             margin-top: 20px;

         }

         .newlbHight {

             float:right;

             color:red;

             margin-right:-42px;

             margin-top: 50px;

         }

         .lbDescription {

             position:absolute;

             font: normal 24px Arial, Helvetica, sans-serif;

             color:black;

             top:110px;

             left:20px;

             padding: 8px 1px;

         }

     </style>

3. 用JS控制行为：

 <script type="text/javascript">

         var data = { // 数据源

             "/Imgs/katong_4_1440x900.jpg": ["苏童", "158cm", "温柔，委婉"],

             "/Imgs/katong_2_1440x900.jpg": ["紫童", "172cm", "性格率真"],

             "/Imgs/katong_5_1440x900.jpg": ["小倩", "165cm", "爱好广泛"],

             "/Imgs/katong_3_1440x900.jpg": ["顺姬", "158cm", "美丽，大方"]

         };

         function initEvent() { // load事件触发initEvent()方法

             var div = document.getElementById("peopleInfo");

             var table = document.createElement("table");

             var count = 0;

             for (var key in data) { // 动态加载图片详细

                 var tr, td, img;

                 var dataValue = data[key];

                 td = document.createElement("td");

                 img = document.createElement("img");

                 img.id = count;

                 img.setAttribute("src", key);

                 img.setAttribute("alt1", key);

                 img.setAttribute("alt2", dataValue[0]);

                 img.setAttribute("alt3", dataValue[1]);

                 img.setAttribute("alt4", dataValue[2]);

                 img.width = '50';

                 img.height = '50';

                 img.onmouseover = function () { // 鼠标移动时动态创建相应图片的详细信息

                     // 动态创建的div，并设置其属性

                     var newDiv = document.createElement("div");

                     newDiv.className = "newDiv";

                     var x = window.event.clientX;

                     var y = window.event.clientY;

                     newDiv.style.top = y+"px";

                     newDiv.style.left = x + "px";

                     // 动态创建img，并设置相应属性

                     var newImg = document.createElement("img");

                     newImg.className = "newImg";

                     var imgPath = this.getAttribute("alt1").toString();

                     newImg.src = imgPath;

                     var name = this.getAttribute("alt2").toString();

                     var height = this.getAttribute("alt3").toString();

                     var description=this.getAttribute("alt4").toString();

                     // 动态创建label,显示姓名信息

                     var lbName = document.createElement("label");

                     lbName.className = "newlbName";

                     lbName.innerText = name;

                     newDiv.appendChild(lbName);

                     // 动态创建label,显示身高信息

                     var lbHight = document.createElement("label");

                     lbHight.className = "newlbHight";

                     lbHight.innerText = height;

                     newDiv.appendChild(lbHight);

                     // 动态创建label,显示描述信息

                     var lbDescription = document.createElement("label");

                     lbDescription.className = "lbDescription";

                     lbDescription.innerText = description;

                     newDiv.appendChild(lbDescription);

                     // 将创建的元素添加到新的div中

                     newDiv.appendChild(newImg);

                     document.body.appendChild(newDiv);

                 }

                 img.onmouseout = function () { //鼠标离开时，移出掉新创建的div元素

                     var divs = document.getElementsByTagName("div");

                     for (var i = 0; i < divs.length; i++)

                     {

                         var div = divs[i];

                         if (div.className == "newDiv")

                         {

                             document.body.removeChild(div);

                         }

                     }

                 }

                 td.appendChild(img);

                 if (count % 2 == 0) { // 设置换行

                     tr = document.createElement("tr");

                 }

                 tr.appendChild(td);

                 table.appendChild(tr);

                 count++;

             }

             div.appendChild(table);

         }

     </script>

4. 显示结果：

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

Javascript版-显示相应图片的详细信息的更多相关文章

  1. python 抓取美丽说店铺的宝贝图片及详细信息的实现（爬虫）

    对于页面的抓取,我们使用的是requests,现在大部分的网站都支持动态加载,我们在firefox f12后查找动态的url :http://www.meilishuo.com/aj/shop_lis ...

  2. Exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)

    Exif.js插件介绍 http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案 https://w ...

  3. VC++ 在Watch窗口显示GetLastError值以及详细信息

    You can display the value GetLastError() will return by putting "@err" in your watch windo ...

  4. 大家的备忘录——xpage_在同一页面展开文档显示该文档详细信息（可显示处理过的Rich Text）

    Xpage大纲: 解析: 1.通过[link2]点击触发jQuery事件来展开[面板:thispanel] 2.[面板:thispanel]写了onClientLoad事件:让thispanel隐藏. ...

  5. easyUI 展开DataGrid里面的行显示详细信息

    http://blog.csdn.net/yanghongchang_/article/details/7854156原著 datagrid 可以改变它的view(视图)去显示不同的效果.使用详细视图 ...

  6. 单击HighCharts柱形体弹框显示详细信息

    上篇博客介绍了如何在HighCharts统计图表下生成表格,二者相互结合,可以对数据进行更好的统计分析.在统计的同时,如果需要想要及时查看详细信息的话,就得再加一个功能,就是单击柱形体,显示该项下的详 ...

  7. Display a Detail View with a List View 主子视图-列表视图与详细信息视图同时显示

    In this lesson, you will learn how to display a Detail View together with a List View. For this purp ...

  8. 最简单的方法是使用标准的 Linux GUI 程序之一: i-nex 收集硬件信息，并且类似于 Windows 下流行的 CPU-Z 的显示。 HardInfo 显示硬件具体信息，甚至包括一组八个的流行的性能基准程序，你可以用它们评估你的系统性能。 KInfoCenter 和 Lshw 也能够显示硬件的详细信息，并且可以从许多软件仓库中获取。

    最简单的方法是使用标准的 Linux GUI 程序之一: i-nex 收集硬件信息,并且类似于 Windows 下流行的 CPU-Z 的显示. HardInfo 显示硬件具体信息,甚至包括一组八个的流 ...

  9. Linux 查找指定名称的进程并显示进程详细信息

    实际应用中可能有这样的场景:给定一个进程名称特征串,查找所有匹配该进程名称的进程的详细信息. 解决的办法是: (1) 先用pgrep [str] 命令进行模糊匹配,找到匹配该特征串的进程ID: (2) ...

随机推荐

  1. mysql 分析2 show processlist ;

    show processlist ; 可以查看当前有哪些链接 处于什么状态 分析语句 那些连接处于什么状态 (需要通过脚本观察一段时间内的有运行情况做出统计一直刷新服务器运行状态 ) 当出现下面的几种 ...

  2. nagios报错HTTP WARNING: HTTP/1.1 403 Forbidden解决方法

    Nagios--localhost报警:"WARNING: HTTP/1.1 403 Forbidden "解决方法: In dashboard it shows alert on ...

  3. 线段树（hdu 1556）

    Problem Description: N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的"小飞鸽"牌电 ...

  4. Broker节点

    在druid集群环境中 broker节点的作用是查询.它知道metadata 通过zookeeper发送到了集群中的哪个节点,从而能够准确的查询到.broker也把各个节点的结果汇聚到一个节点中.On ...

  5. PHP站内搜索

    1.SQL语句中的模糊查找 LIKE条件一般用在指定搜索某字段的时候, 通过"% 或_" 通配符的作用实现模糊查找功能,通配符可以在前面也可以在后面或前后都有. 搜索以PHP100 ...

  6. win8.1启用ahci后蓝屏

    先简单介绍一下,本应该win7开始,系统安装的时候默认就启用了ahci硬盘模式.但是博主犯了傻,装了win8.1后安装win XP形成双系统.xp并不支持ahci模式,所以将硬盘模式改成了IDE模式, ...

  7. linux C/C++ 日志打印函数

    //宏定义日志文件名 #define PROCESSNAME  "log_filename" //当日志文件大于5M时,会删除该文件,该接口使用方法 参照printfvoid Wr ...

  8. Linux - 进程间通信 - 信号量

    一.概念 简单来讲,信号量是一个用来描述临界资源的资源个数的计数器. 信号量的本质是一种数据操作锁,它本身不具有数据交换的功能,而是通过控制其他的通信资源(文件.外部设备等)来实现进程间通信, 他本身 ...

  9. nginx负载均衡(一)

    背景: 最近公司分配一个项目,做一个直播APP的后台,像这种随时都有用户在线的情况,后台一定不能down掉,而且只做一台服务器的话压力肯定很大,所以考虑用nginx做负载均衡 环境: 三台linux服 ...

  10. 【代码学习】PHP中GD库的使用

    PHP--GD库 ================================================ 一.支持: 需要php支持GD库 二.作用: 验证码.水印.缩放等 三.绘画步骤: ...