87,989
社区成员
发帖
与我相关
我的任务
分享该代码实现点击图片放大显示详细内容 ，但是显示不出来
该代码实现点击图片放大显示详细内容 ，但是显示不出来 ，检验再三 实在看不出问题在哪，求高人指点
<!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 type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var data = { "images/1small.JPG": ["images/1.JPG", "第一个", "10"], "images/2small.JPG": ["images/2.JPG", "第二个", "20"], "images/3small.JPG": ["images/3.JPG", "第三个", "30"] };
$(function() {
$.each(data, function(key, value) {
var smallimg = $("<img src='" + key + "'/>");
smallimg.attr("bigmappath", value[0]);
smallimg.attr("whichone", value[1]);
smallimg.attr("ages", value[2]);
smallimg.mouseover(function(e) {
$("#img1").attr("src", $(this).attr("bigmappath"));
$("#whichone").text($(this).attr("whichone"));
$("#ages").text($(this).attr("ages"));
$("#div1").css("left", e.pageX).css("top", e.pageY);
})
$("body").append(smallimg);
});
})
</script>
</head>
<body>
<div id="div1" style="position:absolute; display:none;">
<img id="img1" src="" alt="" />
<p id="whichone"></p>
<p id="ages"></p>
</div>
</body>
</html>
<!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 type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
var data = { "images/1small.JPG": ["images/1.JPG", "第一个", "10"], "images/2small.JPG": ["images/2.JPG", "第二个", "20"], "images/3small.JPG": ["images/3.JPG", "第三个", "30"] };
$(function() {
$.each(data, function(key, value) {
var smallimg = $("<img src='" + key + "'/>");
smallimg.attr("bigmappath", value[0]);
smallimg.attr("whichone", value[1]);
smallimg.attr("ages", value[2]);
smallimg.mouseover(function(e) {
$("#img1").attr("src", $(this).attr("bigmappath"));
$("#whichone").text($(this).attr("whichone"));
$("#ages").text($(this).attr("ages"));
$("#div1").css("left", e.pageX).css("top", e.pageY);
})
$("body").append(smallimg);
});
})
</script>
</head>
<body>
<div id="div1" style="position:absolute; display:none;">
<img id="img1" src="" alt="" />
<p id="whichone"></p>
<p id="ages"></p>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
vosi 2011-06-02
- 打赏
- 举报
原来是忘了显示，问题已找到- -！！！
kk297173176 2011-06-02
- 打赏
- 举报
