zoukankan      html  css  js  c++  java
  • 美女图片的显示

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>   

      <title></title>

        <script src="../js/jquery-1.3.2.js" type="text/javascript"></script>  

       <script type="text/javascript">    

    var data = { "/images/11.jpg": ["/images/00.jpg", "吸烟鬼", "1.34"], "/images/22.jpg": ["/images/00_00.jpg", "造反", "1.85"], "/images/33.jpg": ["/images/00_01.jpg", "美女时钟", "1.85"] };    

    $(function() {       

      $.each(data, function(key, value) {         

        var smalling = $("<img src='" + key + " '/>");         

        smalling.attr("personImg", value[0]);          

       smalling.attr("personname", value[1]);      

           smalling.attr("personheight", value[2]);       

          smalling.mouseover(function(e) {//当鼠标移上去时触发的事件         

            $("#detailImg").attr("src", $(this).attr("personImg"));    

                 $("#detailname").text($(this).attr("personname"));  

                   $("#detailheight").text($(this).attr("personheight"));        

             $("#details").css("top", e.pageY).css("left", e.pageX).css("display", "");      

           });

                $("body").append(smalling);

            });       

      $("#btnclose").click(function() {       

          $("#details").css("display", "none");       

      });

        });     </script> </head> <body> <div style="display:none;position:absolute;" id="details"> <img id="detailImg" src="" /> <p id="detailname"></p> <p id="detailheight"></p> <input type="button" value="关闭" id="btnclose"/> </div> </body> </html>

  • 相关阅读:
    MySql从一窍不通到入门(五)Sharding:分表、分库、分片和分区
    rac 关库 启库
    rac 配置dg完成版
    CRS添加、删除节点
    分区表性能窥测
    传入时间按月分区并创建每月表空间
    python to be linux daemon
    python to be Windows Daemon
    Shell数组相关操作
    Python操作PDF与Tiff文件
  • 原文地址:https://www.cnblogs.com/msdncrazy/p/2980574.html
Copyright © 2011-2022 走看看