您的位置：首页 > 其它

鼠标移到小图显示详细信息

2012-02-24 15:04 134 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
var data = { "s1.jpg": ["1.jpg", "风景1", "American"],
"s2.jpg": ["2.jpg", "风景2", "Canadian"],
"s3.jpg": ["3.jpg", "风景3", "Chinese"]
};
$(function () {
$.each(data, function (key, val) {
var smallimage = $("<img src='" + key + "'/>");//动态创建元素
smallimage.attr("bigpath", val[0]);
smallimage.attr("bigname", val[1]);
smallimage.attr("bigcountry", val[2]);
smallimage.hover(function (e) {
$("#img2").attr("src", $(this).attr("bigpath"));
$("#p1").text($(this).attr("bigname"));
$("#p2").text($(this).attr("bigcountry"));
$(":button").click(function () { $("div").css("display", "none") }); //$("div").hide()也可以
$("div").css("left", e.pageX).css("top", e.pageY).css("display", "");

});
//smallimage.mouseleave(function () { $("div").hide() });
$("body").append(smallimage);//把动态创建的元素添加到body中
});

});
</script>
</head>
<body>
<div style=" display:none; position:absolute">
<img id="img2" src=""/>
<p id="p1"></p>
<p id="p2"></p>
<input type="button" value="关闭"/>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航