jQuery焦点中国地图

2025-02-20 技术教程

以下为上图代码实例：

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function(){ $("#dataMapa").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>

<divid="dataMap"><spanstyle="top:162px;left:392px"><ahref="#"class="hotcity">北京</a><em>9999</em></span><spanstyle="top:110px;left:465px;"><ahref="#">吉林</a><em>9999</em></span><spanstyle="top:165px;left:305px"><ahref="#">内蒙古</a><em>9999</em></span><spanstyle="top:260px;left:120px"><ahref="#">西藏</a><em>9999</em></span><spanstyle="top:293px;left:255px"><ahref="#">四川</a><em>9999</em></span><spanstyle="top:290px;left:310px"><ahref="#">重庆</a><em>9999</em></span><spanstyle="top:365px;left:380px"><ahref="#">广东</a><em>9999</em></span><spanstyle="top:335px;left:295px"><ahref="#">贵州</a><em>9999</em></span><spanstyle="top:420px;left:342px"><ahref="#">海南</a><em>9999</em></span><spanstyle="top:70px;left:460px"><ahref="#">黑龙江</a><em>9999</em></span><spanstyle="top:296px;left:445px"><ahref="#">浙江</a><em>9999</em></span><spanstyle="top:265px;left:410px"><ahref="#">安徽</a><em>9999</em></span><spanstyle="top:206px;left:400px"><ahref="#">山东</a><em>9999</em></span><spanstyle="top:359px;left:237px"><ahref="#">云南</a><em>9999</em></span><spanstyle="top:222px;left:180px"><ahref="#">青海</a><em>9999</em></span><spanstyle="top:165px;left:200px"><ahref="#">甘肃</a><em>9999</em></span><spanstyle="top:200px;left:300px"><ahref="#">宁夏</a><em>9999</em></span><spanstyle="top:317px;left:343px"><ahref="#">湖南</a><em>9999</em></span><spanstyle="top:317px;left:400px"><ahref="#">江西</a><em>9999</em></span><spanstyle="top:250px;left:435px"><ahref="#">江苏</a><em>9999</em></span><spanstyle="top:280px;left:458px"><ahref="#"class="hotcity">上海</a><em>9999</em></span><spanstyle="top:385px;left:355px"><ahref="#">澳门</a><em>9999</em></span><spanstyle="top:383px;left:392px"><ahref="#">香港</a><em>9999</em></span><spanstyle="top:138px;left:433px"><ahref="#">辽宁</a><em>9999</em></span><spanstyle="top:190px;left:380px"><ahref="#">河北</a><em>9999</em></span><spanstyle="top:210px;left:350px"><ahref="#">山西</a><em>9999</em></span><spanstyle="top:176px;left:408px"><ahref="#">天津</a><em>9999</em></span><spanstyle="top:130px;left:125px"><ahref="#">新疆</a><em>9999</em></span><spanstyle="top:277px;left:357px"><ahref="#">湖北</a><em>9999</em></span><spanstyle="top:240px;left:310px"><ahref="#">陕西</a><em>9999</em></span><spanstyle="top:240px;left:360px"><ahref="#">河南</a><em>9999</em></span><spanstyle="top:340px;left:420px"><ahref="#">福建</a><em>9999</em></span><spanstyle="top:360px;left:460px"><ahref="#">台湾</a><em>9999</em></span><spanstyle="top:375px;left:315px"><ahref="#">广西</a><em>9999</em></span></div><divid="dataTip"class="dataTip"></div>

上图代码示例，所需其它文件在附件中：

<HTMLlang=chstyle="HEIGHT:100%" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Demo</TITLE><METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8"><SCRIPTsrc="swfobject.js"type=text/javascript></SCRIPT><SCRIPTtype=text/javascript>functioneventHandler(e){ alert(e.value); } </SCRIPT><METAcontent="MSHTML6.00.6000.17098"name=GENERATOR></HEAD><BODYid=player><DIVid=container>GettheFlashPlayertoseethisplayer</DIV><SCRIPTtype=text/javascript>vars1=newSWFObject("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><embedmenu="true"loop="true"play="true"type="application/x-shockwave-flash"height="500"width="500"src="map.swf"></embed></p></body></html>

<HTMLlang=zh><HEAD><TITLE>中国分省市地图导航-SVG格式（基于Raphaël）</TITLE><METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8"><LINK href="style.css"type=text/cssrel=stylesheet><SCRIPTsrc="jquery.min.js"type=text/javascript></SCRIPT><SCRIPTsrc="raphael.js"type=text/javascript></SCRIPT><SCRIPTtype=text/javascript>//预留作为初始化打开显示的省份 varcurrent=null; </SCRIPT><SCRIPTsrc="chinamap.js"type=text/javascript></SCRIPT><STYLE>#ChinaMap{ PADDING-RIGHT:10px;PADDING-LEFT:10px;PADDING-BOTTOM:10px;MARGIN:0pxauto;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'MicrosoftYaHei',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'MicrosoftYaHei',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:#c5b2701pxsolid;PADDING-RIGHT:15px;BORDER-TOP:#c5b2701pxsolid;PADDING-LEFT:15px;BACKGROUND:#fffbd6;PADDING-BOTTOM:0px;BORDER-LEFT:#c5b2701pxsolid;COLOR:#bb861c;LINE-HEIGHT:30px;PADDING-TOP:0px;BORDER-BOTTOM:#c5b2701pxsolid;TOP:30px } </STYLE><METAcontent="MSHTML6.00.6000.17098"name=GENERATOR></HEAD><BODYclass=yui-skin-sam><DIVclass=demoid=doc><DIVid=hd><DIVclass=page-title><H1>中国分省市地图导航SVG格式（基于Raphaël）</H1></DIV></DIV><DIVid=bd><DIVclass=tell><H2><STRONG>在很多场合会用到，如果让你忘掉flash，下面这地图是你“不二“的选择，^_^.</STRONG></H2><P>SVG地图基于<Ahref="http://raphaeljs.com/">Raphaël</A>生成；为了书写方便，使用了<A href="http://jquery.com/">Jquery</A>实现一些动画。</P></DIV><DIVid=ChinaMap><DIVid=ToolTip>地图正在绘制...</DIV></DIV><SCRIPTsrc="codepress.js"type=text/javascript></SCRIPT></BODY></HTML>

附件：http://down.51cto.com/data/2358563