以下是 jQuery中国各个省份地图分部代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery中国各个省份地图分部代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--[if IE 6]>
<script src="js/DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
<body>
<div class="map">
<img src="images/map.jpg" width="716" height="595" usemap="#Map" border="0">
<div class="city"><div class="citybg" style="background:url(images/anhui.png) no-repeat 0 0; top:314px; left:523px; width:75px; height:90px;"></div><a style=" position:absolute; top:355px; left:545px; z-index:10;" href="index.html">安徽</a></div>
<div class="city"><div class="citybg" style="background:url(images/neimeng.png) no-repeat 0 0; top:9px; left:296px; width:318px; height:272px; display:block;"></div><a style="position:absolute; top:211px; left:424px; z-index:10;" href="index.html">内蒙</a></div>
<div class="city"><div class="citybg" style=" background:url(images/heilongjiang.png) no-repeat 0 0; top:1px; left:550px; width:165px; height:151px;"></div><a style="position:absolute;top:81px; left:624px; z-index:10;" href="index.html">黑龙江</a></div>
<div class="city"><div class="citybg" style=" background:url(images/xinjiang.png) no-repeat 0 0; top:73px; left:0px; width:292px; height:223px;"></div><a style="position:absolute;top:211px; left:124px; z-index:10;" href="index.html">新疆</a></div>
<div class="city"><div class="citybg" style=" background:url(images/xizang.png) no-repeat 0 0; top:275px; left:31px; width:281px; height:175px;"></div><a style="position:absolute;top:361px; left:145px; z-index:10;" href="index.html">西藏</a></div>
<div class="city"><div class="citybg" style=" background:url(images/qinghai.png) no-repeat 0 0; top:240px; left:182px; width:185px; height:135px;"></div><a style="position:absolute;top:300px; left:254px; z-index:10;" href="index.html">青海</a></div>
<div class="city"><div class="citybg" style=" background:url(images/gansu.png) no-repeat 0 0; top:187px; left:236px; width:207px; height:177px;"></div><a style="position:absolute;top:310px; left:364px; z-index:10;" href="index.html">甘肃</a></div>
<div class="city"><div class="citybg" style=" background:url(images/ningxia.png) no-repeat 0 0; top:245px; left:379px; width:49px; height:75px;"></div><a style="position:absolute;top:272px; left:390px; z-index:10;" href="index.html">宁夏</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanghai.png) no-repeat 0 0; top:354px; left:610px; width:23px; height:22px;"></div><a style="position:absolute;top:352px; left:615px;; z-index:10;" href="index.html">上海</a></div>
<div class="city"><div class="citybg" style=" background:url(images/liaoning.png) no-repeat 0 0; top:161px; left:557px; width:91px; height:87px;"></div><a style="position:absolute;top:180px; left:600px; z-index:10;" href="index.html">辽宁</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guangdong.png) no-repeat 0 0; top:470px; left:464px; width:111px; height:88px;"></div><a style="position:absolute;top:490px; left:500px; z-index:10;" href="index.html">广东</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guangxi.png) no-repeat 0 0; top:454px; left:382px; width:118px; height:92px;"></div><a style="position:absolute;top:488px; left:432px; z-index:10;" href="index.html">广西</a></div>
<div class="city"><div class="citybg" style=" background:url(images/henan.png) no-repeat 0 0; top:288px; left:461px; width:118px; height:92px;"></div><a style="position:absolute;top:320px; left:490px; z-index:10;" href="index.html">河南</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanxi.png) no-repeat 0 0; top:242px; left:396px; width:79px; height:134px;"></div><a style="position:absolute;top:321px; left:430px; z-index:10;" href="index.html">陕西</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shanxi2.png) no-repeat 0 0; top:219px; left:458px; width:56px; height:112px;"></div><a style="position:absolute;top:271px; left:470px; z-index:10;" href="index.html">山西</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hebei.png) no-repeat 0 0; top:184px; left:497px; width:85px; height:118px;"></div><a style="position:absolute;top:247px; left:508px; z-index:10;" href="index.html">河北</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jilin.png) no-repeat 0 0; top:113px; left:575px; width:125px; height:88px;"></div><a style="position:absolute;top:150px; left:642px; z-index:10;" href="index.html">吉林</a></div>
<div class="city"><div class="citybg" style=" background:url(images/beijing.png) no-repeat 0 0; top:210px; left:512px; width:50px; height:38px;"></div><a style="position:absolute;top:215px; left:515px; z-index:10;" href="index.html">北京</a></div>
<div class="city"><div class="citybg" style=" background:url(images/tianjin.png) no-repeat 0 0; top:224px; left:535px; width:26px; height:34px;"></div><a style="position:absolute;top:229px; left:535px; z-index:10;" href="index.html">天津</a></div>
<div class="city"><div class="citybg" style=" background:url(images/shandong.png) no-repeat 0 0; top:256px; left:521px; width:103px; height:68px;"></div><a style="position:absolute;top:281px; left:540px; z-index:10;" href="index.html">山东</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jiangsu.png) no-repeat 0 0; top:305px; left:539px; width:93px; height:72px;"></div><a style="position:absolute;top:321px; left:570px; z-index:10;" href="index.html">江苏</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hainan.png) no-repeat 0 0; top:556px; left:442px; width:89px; height:88px;"></div><a style="position:absolute;top:565px; left:450px; z-index:10;" href="index.html">海南</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hubei.png) no-repeat 0 0; top:345px; left:438px; width:115px; height:75px;"></div><a style="position:absolute;top:365px; left:480px; z-index:10;" href="index.html">湖北</a></div>
<div class="city"><div class="citybg" style=" background:url(images/yunnan.png) no-repeat 0 0; top:412px; left:280px; width:132px; height:138px;"></div><a style="position:absolute;top:485px; left:320px; z-index:10;" href="index.html">云南</a></div>
<div class="city"><div class="citybg" style=" background:url(images/sichuan.png) no-repeat 0 0; top:328px; left:284px; width:161px; height:143px;"></div><a style="position:absolute;top:385px; left:345px; z-index:10;" href="index.html">四川</a></div>
<div class="city"><div class="citybg" style=" background:url(images/guizhou.png) no-repeat 0 0; top:409px; left:367px; width:93px; height:81px;"></div><a style="position:absolute;top:445px; left:405px; z-index:10;" href="index.html">贵州</a></div>
<div class="city"><div class="citybg" style=" background:url(images/taiwan.png) no-repeat 0 0; top:456px; left:613px; width:32px; height:65px;"></div><a style="position:absolute;top:475px; left:620px; z-index:10;" href="index.html">台湾</a></div>
<div class="city"><div class="citybg" style=" background:url(images/fujian.png) no-repeat 0 0; top:415px; left:548px; width:70px; height:84px;"></div><a style="position:absolute;top:445px; left:565px; z-index:10;" href="index.html">福建</a></div>
<div class="city"><div class="citybg" style=" background:url(images/hunan.png) no-repeat 0 0; top:394px; left:445px; width:83px; height:96px;"></div><a style="position:absolute;top:425px; left:475px; z-index:10;" href="index.html">湖南</a></div>
<div class="city"><div class="citybg" style=" background:url(images/zhejiang.png) no-repeat 0 0; top:367px; left:574px; width:62px; height:70px;"></div><a style="position:absolute;top:395px; left:588px; z-index:10;" href="index.html">浙江</a></div>
<div class="city"><div class="citybg" style=" background:url(images/jiangxi.png) no-repeat 0 0; top:390px; left:513px; width:76px; height:98px;"></div><a style="position:absolute;top:425px; left:525px; z-index:10;" href="index.html">江西</a></div>
<div class="city"><div class="citybg" style=" background:url(images/chongqing.png) no-repeat 0 0; top:363px; left:397px; width:70px; height:80px;"></div><a style="position:absolute;top:390px; left:420px; z-index:10;" href="index.html">重庆</a></div>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/jscript" src="js/main.js"></script>
</body>
</html>JS代码(main.js):
$(document).ready(function(){
maphover();
}
);
function maphover(){
var self = "";
$(".city").hover(function(){
self = $(this);
self.addClass("hover").children("div").show();
}
,function(){
self = $(this);
self.children("div").hide();
self.removeClass("hover");
}
);
$(".city").click(function(){
self = $(this);
self.addClass("hover").children("div").show();
}
,function(){
self = $(this);
self.children("div").hide();
self.removeClass("hover");
}
);
}
;
分享到QQ
分享到微博
微信扫一扫
