焦点map

上个礼拜在做一个毕业生管理系统时应用到了该地图，有个功能实现需要根据地域来查找毕业生，为了更好的视觉效果，就使用图形化的map

这款是网上找到的（jquery实现），使用了下还挺方便的，虽然不是非常的好看，哈哈哈，一些jquery，图片等大家可以去下载到本地，这里使用的都是网络地址

（可能是我不太会使用博客，不知道怎么来链接下载功能，知道的朋友可以告诉我下）

demo：

<!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>jQuery焦点中国地图</title>

<style>

body {margin:0;padding:0;}

#dataMap {position:relative;margin:0 auto;width:552px;height:447px;font-size:12px;background:url(http://home.51cto.com/data/uploads/20110719/15/4e252f9ee41f8.gif) no-repeat left top;}

#dataMap span {position:absolute;}

#dataMap a {display:block;padding-left:20px;line-height:1.8;text-decoration:none;color:#000;background:url(http://home.51cto.com/data/uploads/20110719/15/4e252f9eb3cd6.gif) no-repeat left 4px;}

#dataMap a:hover,#dataMap a:active {color:#f00;background-position:left bottom;}

#dataMap a.hotcity {color:#f00;font-weight:700;}

#dataMap em {display:none;}

.dataTip {display:none;position:absolute;z-index:9999;font-size:12px;padding:0 3px;border:1px solid #000;background-color:#ffc;}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>

$(function(){

    $("#dataMap a").mousemove(function(e){$("#dataTip").html($(this).next().html()+"篇相关文章").css({"left":e.pageX+10+"px","top":e.pageY-15+"px"}).show()}).mouseout(function(){$("#dataTip").hide();});

})

</script>

</head>



<body>

    <div id="dataMap">

        <span style="top:162px;left:392px"><a href="#" class="hotcity">北京</a><em>9999</em></span>

        <span style="top:110px;left:465px;"><a href="#">吉林</a><em>9999</em></span>

        <span style="top:165px;left:305px"><a href="#">内蒙古</a><em>9999</em></span>

        <span style="top:260px;left:120px"><a href="#">西藏</a><em>9999</em></span>

        <span style="top:293px;left:255px"><a href="#">四川</a><em>9999</em></span>

        <span style="top:290px;left:310px"><a href="#">重庆</a><em>9999</em></span>

        <span style="top:365px;left:380px"><a href="#">广东</a><em>9999</em></span>

        <span style="top:335px;left:295px"><a href="#">贵州</a><em>9999</em></span>

        <span style="top:420px;left:342px"><a href="#">海南</a><em>9999</em></span>



        <span style="top:70px;left:460px"><a href="#">黑龙江</a><em>9999</em></span>

        <span style="top:296px;left:445px"><a href="#">浙江</a><em>9999</em></span>

        <span style="top:265px;left:410px"><a href="#">安徽</a><em>9999</em></span>

        <span style="top:206px;left:400px"><a href="#">山东</a><em>9999</em></span>

        <span style="top:359px;left:237px"><a href="#">云南</a><em>9999</em></span>

        <span style="top:222px;left:180px"><a href="#">青海</a><em>9999</em></span>

        <span style="top:165px;left:200px"><a href="#">甘肃</a><em>9999</em></span>

        <span style="top:200px;left:300px"><a href="#">宁夏</a><em>9999</em></span>

        <span style="top:317px;left:343px"><a href="#">湖南</a><em>9999</em></span>



        <span style="top:317px;left:400px"><a href="#">江西</a><em>9999</em></span>

        <span style="top:250px;left:435px"><a href="#">江苏</a><em>9999</em></span>

        <span style="top:280px;left:458px"><a href="#" class="hotcity">上海</a><em>9999</em></span>

        <span style="top:385px;left:355px"><a href="#">澳门</a><em>9999</em></span>

        <span style="top:383px;left:392px"><a href="#">香港</a><em>9999</em></span>

        <span style="top:138px;left:433px"><a href="#">辽宁</a><em>9999</em></span>

        <span style="top:190px;left:380px"><a href="#">河北</a><em>9999</em></span>

        <span style="top:210px;left:350px"><a href="#">山西</a><em>9999</em></span>

        <span style="top:176px;left:408px"><a href="#">天津</a><em>9999</em></span>



        <span style="top:130px;left:125px"><a href="#">新疆</a><em>9999</em></span>

        <span style="top:277px;left:357px"><a href="#">湖北</a><em>9999</em></span>

        <span style="top:240px;left:310px"><a href="#">陕西</a><em>9999</em></span>

        <span style="top:240px;left:360px"><a href="#">河南</a><em>9999</em></span>

        <span style="top:340px;left:420px"><a href="#">福建</a><em>9999</em></span>

        <span style="top:360px;left:460px"><a href="#">台湾</a><em>9999</em></span>

        <span style="top:375px;left:315px"><a href="#">广西</a><em>9999</em></span>

    </div>

    <div id="dataTip" class="dataTip"></div>

</body>

</html>

posted on 2012-04-17 15:17 发表是最好的记忆阅读(426) 评论(0) 编辑收藏举报