[转:]jQuery焦点中国地图
转自:http://xiaoyaosr.blog.51cto.com/180639/616706
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://xiaoyaosr.blog.51cto.com/180639/616706
以下为上图代码实例:
- <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>
- <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>
上图代码示例,所需其它文件在附件中:
- <HTML lang=ch style="HEIGHT: 100%"
- xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Demo</TITLE>
- <META http-equiv=Content-Type content="text/html; charset=utf-8">
- <SCRIPT src="swfobject.js" type=text/javascript></SCRIPT>
- <SCRIPT type=text/javascript>
- function eventHandler(e) {
- alert(e.value);
- }
- </SCRIPT>
- <META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD>
- <BODY id=player>
- <DIV id=container>Get the Flash Player to see this player</DIV>
- <SCRIPT type=text/javascript>
- var s1 = new SWFObject("ChinaMap.swf","ply","600","500","10","#FFFFFF");
- s1.addParam("allowfullscreen","true");
- s1.addParam("allownetworking","all");
- s1.addParam("allowscriptaccess","always");
- s1.addParam("wmode","transparent");
- s1.addVariable("title","中华人民共和国");
- s1.addVariable("xmlurl","d.xml");
- s1.addVariable("jsHandler","eventHandler");
- s1.write("container");
- </SCRIPT>
- </BODY></HTML>
纯Flash版本,调整起来多有不便。
- <html>
- <head><title>Flash版彩色中国地图</title></head>
- <body>
- <p><embed menu="true" loop="true" play="true" type="application/x-shockwave-flash" height="500" width="500" src="map.swf"></embed></p>
- </body>
- </html>
- <HTML lang=zh><HEAD><TITLE>中国分省市地图导航-SVG格式(基于Raphaël)</TITLE>
- <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK
- href="style.css" type=text/css rel=stylesheet>
- <SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT>
- <SCRIPT src="raphael.js" type=text/javascript></SCRIPT>
- <SCRIPT type=text/javascript>
- //预留作为初始化打开显示的省份
- var current = null;
- </SCRIPT>
- <SCRIPT src="chinamap.js" type=text/javascript></SCRIPT>
- <STYLE>
- #ChinaMap {
- PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 560px; PADDING-TOP: 10px; POSITION: relative; TEXT-ALIGN: center
- }
- #tiplayer {
- PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 1000; MIN-HEIGHT: 1em; BACKGROUND: #000; MAX-WIDTH: 250px; PADDING-BOTTOM: 5px; FONT: 12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif; COLOR: #fff; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: left; WORD-WRAP: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px
- }
- #ToolTip {
- PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 1000; MIN-HEIGHT: 1em; BACKGROUND: #000; MAX-WIDTH: 250px; PADDING-BOTTOM: 5px; FONT: 12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif; COLOR: #fff; PADDING-TOP: 5px; POSITION: absolute; TEXT-ALIGN: left; WORD-WRAP: break-word; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px
- }
- #ToolTip {
- BORDER-RIGHT: #c5b270 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #c5b270 1px solid; PADDING-LEFT: 15px; BACKGROUND: #fffbd6; PADDING-BOTTOM: 0px; BORDER-LEFT: #c5b270 1px solid; COLOR: #bb861c; LINE-HEIGHT: 30px; PADDING-TOP: 0px; BORDER-BOTTOM: #c5b270 1px solid; TOP: 30px
- }
- </STYLE>
- <META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD>
- <BODY class=yui-skin-sam>
- <DIV class=demo id=doc>
- <DIV id=hd>
- <DIV class=page-title>
- <H1>中国分省市地图导航 SVG格式(基于Raphaël)</H1></DIV></DIV>
- <DIV id=bd>
- <DIV class=tell>
- <H2><STRONG>在很多场合会用到,如果让你忘掉flash,下面这地图是你“不二“的选择,^_^.</STRONG></H2>
- <P>SVG地图基于<A href="http://raphaeljs.com/">Raphaël</A> 生成;为了书写方便,使用了<A
- href="http://jquery.com/">Jquery</A>实现一些动画。</P></DIV>
- <DIV id=ChinaMap>
- <DIV id=ToolTip>地图正在绘制...</DIV></DIV>
- <SCRIPT src="codepress.js" type=text/javascript></SCRIPT>
- </BODY></HTML>
本文出自 “逍遥居” 博客,请务必保留此出处http://xiaoyaosr.blog.51cto.com/180639/616706
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18