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. 查看Samba用户的方法

    有时我们需要查看服务器上都注册了哪些用户,这时我们就可以用下面的命令来查看了. pdbedit可以编辑samba的用户数据库,具体使用方法可以用man查看. pdbedit -L

  2. 【R.转载】apply函数族的使用方法

    为什么用apply 因为我是一个程序员,所以在最初学习R的时候,当成"又一门编程语言"来学习,但是怎么学都觉得别扭.现在我的看法倾向于,R不是一种通用型的编程语言,而是一种统计领域 ...

  3. oralce set

    1         SET TIMING ON 说明:显示SQL语句的运行时间.默认值为OFF. 在SQLPLUS中使用,时间精确到0.01秒.也就是10毫秒. 在PL/SQL DEVELOPER 中 ...

  4. windows编程初步

    #include <windows.h> const char g_szClassName[] = "myWindowClass"; LRESULT CALLBACK ...

  5. Linux 入门笔记

    一开始对linux总有些抵触,黑黑的命令框不知道如何下手,这次因为工作交接的缘故需要负责之前同事的Node后端部分,node,redis这些都是部署在Linux上的,看了几次运维的同学噼里啪啦的敲命令 ...

  6. [UWP]了解模板化控件(5)：VisualState

    1. 功能需求 使用TemplatePart实现上篇文章的两个需求(Header为空时隐藏HeaderContentPresenter,鼠标没有放在控件上时HeaderContentPresent半透 ...

  7. 判断iframe页面是否加载完成

        if (frames("appIframe").document.readyState !="complete") {          alert(& ...

  8. css3 新属性

    一 选择器1 兄弟选择器 0 以第一个选择器开始,往后找满足条件的兄弟节点 class~class() <-- lorem+数字 -tab --> 可以输出默认文字2 属性选择器 标签[a ...

  9. js中元素（图片）切换和隐藏显示问题

    这个知识点其实也简单,(当然是在理清思路的情况下),在没预习的情况下听的还真是艰难,上课以来唯一的一次懵逼了一天,感觉乱乱的,全是新属性,所以今晚的我破天荒的熬夜敲代码,一定要弄懂! 现在就来梳理下头 ...

  10. SourceTree 无法查看组织仓库

    error log: Pushing to remote: Repository not found. 在使用SourceTree进行版本控制,代替git命令行,而且作为免费 跨平台 功能完备的git ...