天达云 科技型企业 | 亚太互联网络信息中心(APNIC)成员 | 注册免费体验 15天云虚拟主机、7天云服务器
[ 会员登录 ] - [ 免费注册 ]|用户中心|在线充值| 投诉举报
天达云首页 > 互联网学习教程 > web开发 > jQuery焦点中国地图

jQuery焦点中国地图
更新：HHH   时间：2023-1-7

 

 

以下为上图代码实例：

  1. <style>  
  2.  
  3. body {margin:0;padding:0;}  
  4.  
  5. #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;}  
  6.  
  7. #dataMap span {position:absolute;}  
  8.  
  9. #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;}  
  10.  
  11. #dataMap a:hover,#dataMap a:active {color:#f00;background-position:left bottom;}  
  12.  
  13. #dataMap a.hotcity {color:#f00;font-weight:700;}  
  14.  
  15. #dataMap em {display:none;}  
  16.  
  17. .dataTip {display:none;position:absolute;z-index:9999;font-size:12px;padding:0 3px;border:1px solid #000;background-color:#ffc;}  
  18.  
  19. </style> 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
  2.  
  3. <script>  
  4.  
  5. $(function(){  
  6.  
  7.     $("#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();});  
  8.  
  9. })  
  10.  
  11. </script>  
  1. <div id="dataMap"> 
  2.  
  3.         <span style="top:162px;left:392px"><a href="#" class="hotcity">北京</a><em>9999</em></span> 
  4.  
  5.         <span style="top:110px;left:465px;"><a href="#">吉林</a><em>9999</em></span> 
  6.  
  7.         <span style="top:165px;left:305px"><a href="#">内蒙古</a><em>9999</em></span> 
  8.  
  9.         <span style="top:260px;left:120px"><a href="#">西藏</a><em>9999</em></span> 
  10.  
  11.         <span style="top:293px;left:255px"><a href="#">四川</a><em>9999</em></span> 
  12.  
  13.         <span style="top:290px;left:310px"><a href="#">重庆</a><em>9999</em></span> 
  14.  
  15.         <span style="top:365px;left:380px"><a href="#">广东</a><em>9999</em></span> 
  16.  
  17.         <span style="top:335px;left:295px"><a href="#">贵州</a><em>9999</em></span> 
  18.  
  19.         <span style="top:420px;left:342px"><a href="#">海南</a><em>9999</em></span> 
  20.  
  21.  
  22.  
  23.         <span style="top:70px;left:460px"><a href="#">黑龙江</a><em>9999</em></span> 
  24.  
  25.         <span style="top:296px;left:445px"><a href="#">浙江</a><em>9999</em></span> 
  26.  
  27.         <span style="top:265px;left:410px"><a href="#">安徽</a><em>9999</em></span> 
  28.  
  29.         <span style="top:206px;left:400px"><a href="#">山东</a><em>9999</em></span> 
  30.  
  31.         <span style="top:359px;left:237px"><a href="#">云南</a><em>9999</em></span> 
  32.  
  33.         <span style="top:222px;left:180px"><a href="#">青海</a><em>9999</em></span> 
  34.  
  35.         <span style="top:165px;left:200px"><a href="#">甘肃</a><em>9999</em></span> 
  36.  
  37.         <span style="top:200px;left:300px"><a href="#">宁夏</a><em>9999</em></span> 
  38.  
  39.         <span style="top:317px;left:343px"><a href="#">湖南</a><em>9999</em></span> 
  40.  
  41.  
  42.  
  43.         <span style="top:317px;left:400px"><a href="#">江西</a><em>9999</em></span> 
  44.  
  45.         <span style="top:250px;left:435px"><a href="#">江苏</a><em>9999</em></span> 
  46.  
  47.         <span style="top:280px;left:458px"><a href="#" class="hotcity">上海</a><em>9999</em></span> 
  48.  
  49.         <span style="top:385px;left:355px"><a href="#">澳门</a><em>9999</em></span> 
  50.  
  51.         <span style="top:383px;left:392px"><a href="#">香港</a><em>9999</em></span> 
  52.  
  53.         <span style="top:138px;left:433px"><a href="#">辽宁</a><em>9999</em></span> 
  54.  
  55.         <span style="top:190px;left:380px"><a href="#">河北</a><em>9999</em></span> 
  56.  
  57.         <span style="top:210px;left:350px"><a href="#">山西</a><em>9999</em></span> 
  58.  
  59.         <span style="top:176px;left:408px"><a href="#">天津</a><em>9999</em></span> 
  60.  
  61.  
  62.  
  63.         <span style="top:130px;left:125px"><a href="#">新疆</a><em>9999</em></span> 
  64.  
  65.         <span style="top:277px;left:357px"><a href="#">湖北</a><em>9999</em></span> 
  66.  
  67.         <span style="top:240px;left:310px"><a href="#">陕西</a><em>9999</em></span> 
  68.  
  69.         <span style="top:240px;left:360px"><a href="#">河南</a><em>9999</em></span> 
  70.  
  71.         <span style="top:340px;left:420px"><a href="#">福建</a><em>9999</em></span> 
  72.  
  73.         <span style="top:360px;left:460px"><a href="#">台湾</a><em>9999</em></span> 
  74.  
  75.         <span style="top:375px;left:315px"><a href="#">广西</a><em>9999</em></span> 
  76.  
  77.     </div> 
  78.  
  79.     <div id="dataTip" class="dataTip"></div> 

 

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

  1. <HTML lang=ch style="HEIGHT: 100%"   
  2. xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Demo</TITLE> 
  3. <META http-equiv=Content-Type content="text/html; charset=utf-8"> 
  4. <SCRIPT src="swfobject.js" type=text/javascript></SCRIPT> 
  5. <SCRIPT type=text/javascript> 
  6.     function eventHandler(e) {  
  7.         alert(e.value);  
  8.     }  
  9. </SCRIPT> 
  10.  
  11. <META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD> 
  12. <BODY id=player> 
  13. <DIV id=container>Get the Flash Player to see this player</DIV> 
  14. <SCRIPT type=text/javascript> 
  15.         var s1 = new SWFObject("ChinaMap.swf","ply","600","500","10","#FFFFFF");  
  16.         s1.addParam("allowfullscreen","true");  
  17.         s1.addParam("allownetworking","all");  
  18.         s1.addParam("allowscriptaccess","always");  
  19.         s1.addParam("wmode","transparent");  
  20.         s1.addVariable("title","×××");  
  21.         s1.addVariable("xmlurl","d.xml");  
  22.         s1.addVariable("jsHandler","eventHandler");  
  23.         s1.write("container");  
  24.     </SCRIPT> 
  25. </BODY></HTML> 

 

 

 

 

纯Flash版本，调整起来多有不便。

  1. <html> 
  2. <head><title>Flash版彩色中国地图</title></head> 
  3. <body> 
  4. <p><embed menu="true" loop="true" play="true" type="application/x-shockwave-flash" height="500" width="500" src="map.swf"></embed></p> 
  5. </body> 
  6. </html> 

 

 

  1. <HTML lang=zh><HEAD><TITLE>中国分省市地图导航-SVG格式（基于Raphaël）</TITLE> 
  2. <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK   
  3. href="style.css" type=text/css rel=stylesheet> 
  4. <SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT> 
  5.  
  6. <SCRIPT src="raphael.js" type=text/javascript></SCRIPT> 
  7.  
  8. <SCRIPT type=text/javascript> 
  9.                 //预留作为初始化打开显示的省份  
  10.         var current = null;  
  11.     </SCRIPT> 
  12.  
  13. <SCRIPT src="chinamap.js" type=text/javascript></SCRIPT> 
  14.  
  15. <STYLE> 
  16. #ChinaMap {  
  17.     PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 560px; PADDING-TOP: 10px; POSITION: relative; TEXT-ALIGN: center  
  18. }  
  19. #tiplayer {  
  20.     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  
  21. }  
  22. #ToolTip {  
  23.     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  
  24. }  
  25. #ToolTip {  
  26.     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  
  27. }  
  28. </STYLE> 
  29.  
  30. <META content="MSHTML 6.00.6000.17098" name=GENERATOR></HEAD> 
  31. <BODY class=yui-skin-sam> 
  32. <DIV class=demo id=doc> 
  33. <DIV id=hd> 
  34. <DIV class=page-title> 
  35. <H1>中国分省市地图导航 SVG格式（基于Raphaël）</H1></DIV></DIV> 
  36. <DIV id=bd> 
  37. <DIV class=tell> 
  38. <H2><STRONG>在很多场合会用到，如果让你忘掉flash，下面这地图是你“不二“的选择，^_^.</STRONG></H2> 
  39. <P>SVG地图基于<A href="http://raphaeljs.com/">Raphaël</A> 生成；为了书写方便，使用了<A   
  40. href="http://jquery.com/">Jquery</A>实现一些动画。</P></DIV> 
  41. <DIV id=ChinaMap> 
  42. <DIV id=ToolTip>地图正在绘制...</DIV></DIV> 
  43. <SCRIPT src="codepress.js" type=text/javascript></SCRIPT> 
  44. </BODY></HTML> 

 

附件：http://down.51cto.com/data/2358563
返回web开发教程...
400-837-6568
7 * 24小时全天全国服务热线400电话
天达云·专业的云计算服务平台 全国400服务电话：400-837-6568
Copyright © 2011-2024 Tdyun.com. All Rights Reserved. 天达云 版权所有 粤ICP备18083267号-7