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>

  • 相关阅读:
    用c#写一个json的万能解析器
    使用Xpath从网页中获取数据
    pdf文件流生成pdf文件
    AES加密和Base64混合加密
    参数请求post, get , delete中的基本使用(2)
    参数请求post, get , delete中的基本使用(1)
    java多线程打印ABC
    我的开发工具
    MyBatis的#与$
    struts1
  • 原文地址:https://www.cnblogs.com/msdncrazy/p/2980574.html
Copyright © 2011-2022 走看看