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. matlab实现可调节占空比的方波

    我大概讲一下实现的原理:正弦波移相φ,当使得大于sin(φ)的值为1,其他值为-1,占空比就跟这个φ值之间有联系. 占空比原理图如下所示. 结果上图,可以实现调节占空比,方波频率,方波个数. 下面是函 ...

  2. 1145: 零起点学算法52——数组中删数II

    1145: 零起点学算法52--数组中删数II Time Limit: 1 Sec  Memory Limit: 64 MB   64bit IO Format: %lldSubmitted: 293 ...

  3. linux命令之crontab定时执行任务

    一.crond简介 crond 是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务 工具,并且会自动启动c ...

  4. CSS也需要重构

    最初接触到的CSS面向对象,是项目里的CSS超过8千行,缺乏约束和管理,在近期或不远的将来,有迫切的要求需要重构.CSS面向对象和模块化. CSS代码遇到的问题: 重用性差,看着一个CSS的名称,很难 ...

  5. SQL基础增删改查

    一.基础语句介绍 SQL 可以分为两个部分:数据操作语言(DML)和数据定义语言(DDL) 1.数据操作语言(DML)基本指令: select       从数据表中获取数据(现阶阶段,二次开发常用) ...

  6. FreeSWITCH 安装配置的 各种坑, 填坑

    个人安装环境: OS:CentOS6.7 64位 FreeSWITCH Ver:1.6.17 一. 编译出错 安装 之前, 最好 先安装 这几个东西(如果有, 请忽略): yasm (有nasm的话 ...

  7. NuGet（Nuget Packages）

    Nuget是一个.NET平台下的开源的项目,它是Visual Studio的扩展.在使用Visual Studio开发基于.NET Framework的应用时,Nuget能把在项目中添加.移除和更新引 ...

  8. linq 为什么要用linq linq写法

    LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...

  9. Python-3------新年考试周的Python学习

    2016一开始就是考试周,准备专业课的考试复习.每天上午复习,晚上复习到8点半,之后到10点这点时间来看Python.庆幸没有在忙碌的时候荒废 Python的学习. 期待寒假,以前寒假在家总是没事做, ...

  10. hibernate 插入数据时让数据库默认值生效

    用hibernate做数据库插入操作时,在数据库端已经设置了对应列的默认值,但插入的数据一直为null.查找资料发现,原来是hibernate的配置项在作怪. Hibernate允许我们在映射文件里控 ...