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. js面向对象二级菜单

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  2. 线上分享会.net框架“ABP”分享会总结

    前言 为了能够帮助.Net开发者开拓视野,更好的把最新的技术应用到工作中,我在3月底受邀到如鹏网.net训练营直播间为各位学弟学妹们进行ABP框架的直播分享.同时为了让更多的.NET开发者了解ABP框 ...

  3. 如何在 FineUIMvc 中引用第三方 JavaScript 库

    声明:FineUIMvc(基础版)是免费软件,本系列文章适用于基础版. 引入第三方颜色选择器 在 FineUIMvc 中使用第三方 JavaScript 遵循一定的约定,也非常简单. 下面以官网示例为 ...

  4. Spring MVC__自定义日期类型转换器

    WEB层采用Spring MVC框架,将查询到的数据传递给APP端或客户端,这没啥,但是坑的是实体类中有日期类型的属性,但是你必须提前格式化好之后返回给它们.说真的,以前真没这样做过,之前都是一口气查 ...

  5. Webdriver API之操作（一）

    一. 控制浏览器 1. 控制浏览器大小 driver.set_window_size(480,800) #浏览器宽480,高800显示 dirver.maximize_window() #浏览器最大化 ...

  6. 基于bootstrap的bootstrap-editable插件实现即时编辑功能

    1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...

  7. java多线程基本概述（二十）——中断

    线程中断我们已经直到可以使用 interrupt() 方法,但是你必须要持有 Thread 对象,但是新的并发库中似乎在避免直接对 Thread 对象的直接操作,尽量使用 Executor 来执行所有 ...

  8. Centos下装eclipse测试Hadoop

    (一),安装eclipse 1,下载eclipse,点这里 2,将文件上传到Centos7,可以用WinSCP 3,解压并安装eclipse [root@Master opt]# tar zxvf ' ...

  9. java 集合框架(List操作)

    /*list 基本操作 * * List a=new List(); * 增 * a.add(index,element);按指定位置添加,其余元素依次后移 * addAll(index,Collec ...

  10. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...