jQuery鼠标放在图片上显示大图和和图片信息
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>
显示效果
