JQuery方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
var data = { "images/xiao_01.jpg": ["images/00_00.jpg", "张三", "18"], "images/xiao_02.jpg": ["images/00_01.jpg", "李四", "19"], "images/xiao_03.jpg": ["images/00_02.jpg", "王五", "22"] };
$(function () {
$.each(data, function (key, value) {
var xiaoimg = $("<img src=" + key + " />");
xiaoimg.attr("bigpic", value[0]);
xiaoimg.attr("userName", value[1]);
xiaoimg.attr("age", value[2]);
xiaoimg.mouseover(function (e) {
//alert("ok");
$("#imgimg1").attr("src", $(this).attr("bigpic"));
$("#p1").text($(this).attr("userName"));
$("#p2").text($(this).attr("age"));
$("#div1").css("left", e.pageX).css("top", e.pageY).css("display", "");
}).mouseout(function () {
$("#div1").css("display","none");
});
$("body").append(xiaoimg);
})
});
</script>
</head>
<body>
<div id="div1" style="position:absolute;display:none;">
<img id="imgimg1" alt="#" />
<p id="p1"></p>
<p id="p2"></p>
</div>
</body>
</html>
JavaScript方法：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var data = { "images/xiao_01.jpg": ["images/00_00.jpg", "张三", "18"], "images/xiao_02.jpg": ["images/00_01.jpg", "李四", "19"], "images/xiao_03.jpg": ["images/00_02.jpg", "王五", "22"] };
for (var xiaotu in data) {
var xiaotuimg = document.createElement("img");
xiaotuimg.src = xiaotu;
xiaotuimg.setAttribute("datu", data[xiaotu][0]);
xiaotuimg.setAttribute("userName", data[xiaotu][1]);
xiaotuimg.setAttribute("age", data[xiaotu][2]);
xiaotuimg.onmouseover = function () {
//alert("ok");
document.getElementById("img1").src = this.getAttribute("datu");
document.getElementById("p1").innerText = this.getAttribute("userName");
document.getElementById("p2").innerText = this.getAttribute("age");
//alert(this.getAttribute("datu"));
var div1 = document.getElementById("div1");
div1.style.left = window.event.clientX;
div1.style.top = window.event.clientY;
div1.style.display = "";
};
xiaotuimg.onmouseout = function () {
document.getElementById("div1").style.display = "none";
}
document.body.appendChild(xiaotuimg);
}
}
</script>
</head>
<body>
<div id="div1" style="position: absolute; display: none;">
<img id="img1" />
<p id="p1">
</p>
<p id="p2">
</p>
</div>
</body>
</html>
最新评论