<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>根据鼠标定位显示层读取josn信息</title>
</head>
<style>
.msgbox{width:377px; font-size:12px; position:absolute; z-index:2}
.msgbox ul,.msgbox ul li{margin:0px;padding:0px;}
.msgbox .msgbg ul li{ list-style:none;}
.msgbox .msgbg{background:url(img/1.gif) top no-repeat; width:357px; padding-left:20px; padding-top:10px; padding-bottom:10px;}
.msgbox .msgbg label{color:#3e84bd; display:block; margin-bottom:5px;}
.msgbox{background:url(img/2.gif) bottom no-repeat; padding-bottom:3px;}
.dome{ font-size:12px; width:150PX;}
.dome ul{margin:0px; padding:0px;}
.dome ul li{list-style:none; position:relative;}
.dome a{color:#3e84bd; text-decoration:none; display:block; height:30px;}
.dome a:hover{ text-decoration:underline;}
</style>
<body>
<div class="dome">
<ul>
<li><a href="javascript:">海上的月亮</a>
<div class="msgbox" style="display:none;">
<div class="msgbg">
<ul>
</ul>
</div>
</div>
</li>
<li><a href="javascript:">这个世界</a>
<div class="msgbox" style="display:none;">
<div class="msgbg">
<ul>
</ul>
</div>
</div>
</li>
<li><a href="javascript:">呼唤</a>
<div class="msgbox" style="display:none;">
<div class="msgbg">
<ul>
</ul>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(function(){
$(".dome").find("ul li").hover(function(e){
var o = $(".dome ul").find("li a").offset();
var k = $(this).find("a").width();
//模拟ajax josn数据
var url = "text.html";
var i =$(this).find("a").parent().index() ;
var temp_html = "<li> ";
$.getJSON(url,function(json){
$.each(json,function(){
temp_html ="<label>"+json[i].p+" - "+json[i].d+"</label><label>"+json[i].c+"</label><label>"+json[i].d+"</label>";
});
$(".msgbg").find("ul").html(temp_html);
});
$(this).find(".msgbox").css({"top":0,"left":e.pageX}).show();
},function(){
$(this).find(".msgbox").hide();
})
});
</script>
<!--
┏━━━━━━━━━━━━━━━━━━━━━┓
┃ 源 码 爱 好 者 ┃
┣━━━━━━━━━━━━━━━━━━━━━┫
┃ ┃
┃ 提供源码发布与下载 ┃
┃ ┃
┃ http://www.codefans.net ┃
┃ ┃
┃ 互助、分享、提高 ┃
┗━━━━━━━━━━━━━━━━━━━━━┛
-->
</html>
- 1
- 2
前往页