美女图片的显示

<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>

原文地址:https://www.cnblogs.com/msdncrazy/p/2980574.html