jQuery焦点中国地图

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

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

向AI问一下细节

jQuery焦点中国地图

猜你喜欢

最新资讯

相关推荐

相关标签