jQuery代码
<script type="text/javascript"> var date = { "images/003.png": ["images/003.png", "人物1", "185"], "images/004.png": ["images/004.png", "人物2", "165"], "images/005.png": ["images/005.png", "人物3", "170"] }; $(function () { $.each(date, function (key, value) { var smallimg = $("<img src='" + key + "'/>"); smallimg.attr("bigmappath", value[0]);//初始化小图的时候为小图设置这三个属性值 smallimg.attr("personname", value[1]); smallimg.attr("personheight", value[2]); smallimg.mouseover(function (e) { $("#detailimg").attr("src", $(this).attr("bigmappath"));//在mouseover事件的时候使用上面的属性值 $("#detailname").text($(this).attr("personname")); $("#detailheight").text($(this).attr("personheight")); $("#details").css("top", e.pageY).css("left", e.pageX).css("display", ""); }); $("body").append(smallimg); }); $("#clde").click(function () { $("#details").css("display", "none"); }); }); </script>
HTML代码
<body> <div style=" display:none; position:absolute;" id="details"> <img id="detailimg" src="" /> <p id="detailheight"></p> <p id="detailname"></p> <p><input type="button" value="关闭" id="clde" /></p> </div></body>
显示效果
转载于:https://www.cnblogs.com/DillonFly/p/4561892.html
相关资源：JAVA上百实例源码以及开源项目