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. java 基础知识二 基本类型与运算符

    java  基础知识二 基本类型与运算符 1.标识符 定义:为类.方法.变量起的名称 由大小写字母.数字.下划线(_)和美元符号($)组成,同时不能以数字开头 2.关键字 java语言保留特殊含义或者 ...

  2. 课堂博客-----TreeView+++++XML形成博客

    什么是XML? 解析:XML:Extensible Markup Language(可扩展标记语言) HTML:HyperLink Text  Markup Language(超文本标记语言) xml ...

  3. Apache URL重写规则

    1.简介 Apached的重写功能,即是mod_rewrite模块功能,它是apache的一个模块.它的功能非常强大,可以操作URL中的所有部分. 因此我们就可以改写url,给用户提供一个简介大方的u ...

  4. Linux - 死锁现象

    一.死锁的概念: 1.死锁的现象描述: 在很多应用中,需要一个进程排他性的访问若干种资源而不是一种.例如,两个进程准备分别将扫描的文档记录到CD上.进程A请求使用扫描仪, 并被授权使用.但进程B首先请 ...

  5. 修改nagios密码和遇到的问题

    htpasswd -c /usr/local/nagios/etc/htpasswd.users nagiosadmin 密码 密码 service httpd restart 由于本屌丢掉一个s使/ ...

  6. tcptump的使用------使用JAVA与tcpdump从网络获取原始数据

    从这里开始,就开始接触使用分布式系统处理大数据了.在处理大数据之前,需要有一个场景,否则技术工具无法嵌入现实当中,价值就会降低.我碰到的场景应该还是比较具有普遍性,因此大家可以在我的场景里先玩一遍,熟 ...

  7. 安装php提示 configure: error: Cannot find OpenSSL's libraries 解决方案

    一次在安装php7其中提示错误信息 configure: error: Cannot find OpenSSL's libraries 出现这种有2中情况,一种是没有安装 openssl,另一种是安装 ...

  8. JS模式---发布、订阅模式

    发布订阅模式又叫观察者模式,它定义一种一对多的依赖关系, 当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. document.body.addEventListener('click', ...

  9. PHP 学习笔记(3)

    <?phpif (isset($_POST['action']) && $_POST['action'] == 'submitted') {    echo '<pre&g ...

  10. HTML5 进阶系列：拖放 API 实现拖放排序

    前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能. 想要拖放某个元素,必须设置该元素的 dragga ...