jQuery焦点中国地图

发布时间：2020-05-16 10:38:39 阅读：7368 作者：逍遥散人栏目：web开发

前端开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

jQuery焦点中国地图

以下为上图代码实例：

<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>

jQuery焦点中国地图

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

<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>

jQuery焦点中国地图

纯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>

jQuery焦点中国地图

<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://down.51cto.com/data/2358563

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

jQuery焦点中国地图

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签