jQuery地图map悬停显示省市代码分享


Posted in Javascript onAugust 20, 2015

这是一款基于jQuery实现地图map悬停显示省市代码,这样一个神奇的地图便于我们更好地了解中国,增加自己的地理知识。

下面是效果图是不是很棒。

jQuery地图map悬停显示省市代码分享

效果演示 源码下载

为大家分享的jQuery地图map悬停显示省市代码如下

<head>
<meta charset="utf-8">
<title>jQuery地图map悬停显示省市代码</title>
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="js/map-min.js"></script>
<style>
 *{margin:0;padding:0;border: none;}
 body { color: #333; text-align: center; font: 12px "微软雅黑";background-color: #dcf5ed; }
 .mapTipText{width: 280px;height: 110px;background-color: #ffffff;}
 .mapTipText .mapTipImg{height: 66px; width: 66px; float: left;border: 2px solid #ffffff; border-radius: 50%;overflow: hidden;margin: -12px 5px 0 -12px;}
 .mapTipText .mapTipImg img{width: 100%;height: 100%;}
 .mapTipText .mapTipList{float: left;margin-left: 4px;}
 .mapTipText .mapTipList h2{text-align: left;}
 .mapTipText .mapTipList h2 a{font-size: 24px; color: #262626;text-decoration:none;}
 .mapTipText .mapTipList h2 a:hover{ color: #0085d2;}
 .mapTipText .mapTipList h2 a span{font-size: 16px;margin-left: 3px;}
 .mapTipText .mapTipList ul{ width: 203px;padding-right: 10px;}
 .mapTipText .mapTipList ul li{list-style: none;float: left;padding: 7px 3px 0 3px;}
 .mapTipText .mapTipList ul li a{color: #262626;text-decoration:none;}
 .mapTipText .mapTipList ul li a:hover{background-color:#2ebcfe;color:#ffffff;}
</style>
<script type="text/javascript">
 $(function(){
 $('#ChinaMap').SVGMap({
 mapWidth: 806,
 mapHeight: 396
 });
 });
</script>
</head>
<body>


<div class="itemCon" style="float: left">
 <div id="ChinaMap" style="margin: 50px;"></div>
 <div id="stateTip" style="position: absolute;left: 100%;text-align: left;display: inline;"></div>
</div>

<div id="mapTipContent" style="width: 900px;margin: 0 auto;display: none">
 <div class="mapTipText mapTipText0">
 <div class="mapTipImg"><img src="images/heilongjiang.jpg" alt=""/></div>
 <div class="mapTipList">
 <h2><a href="">黑龙江<span>Heilongjiang</span></a></h2>
 <ul>
 <li><a href="">哈尔滨</a></li>
 <li><a href="">漠河</a></li>
 <li><a href="">五大连池</a></li>
 <li><a href="">兴凯湖</a></li>
 <li><a href="">雪乡</a></li>
 <li><a href="">大兴安岭</a></li>
 <li><a href="">齐齐哈尔</a></li>
 <li><a href="">牡丹江</a></li>
 <li><a href="">伊春</a></li>
 <li><a href="">大庆</a></li>
 <li><a href="">镜泊湖</a></li>
 <li><a href="">帽儿山</a></li>
 </ul>
 </div>
 </div>
 <div class="mapTipText mapTipText1">
 <div class="mapTipImg"><img src="images/jilin.jpg" alt=""/></div>
 <div class="mapTipList">
 <h2><a href="">吉林<span>Jilin</span></a></h2>
 <ul>
 <li><a href="">长白山</a></li>
 <li><a href="">长春</a></li>
 <li><a href="">延吉</a></li>
 <li><a href="">雾凇岛</a></li>
 <li><a href="">集安</a></li>
 <li><a href="">吉林市</a></li>
 <li><a href="">查干湖</a></li>
 <li><a href="">三角龙湾</a></li>
 <li><a href="">通化</a></li>
 <li><a href="">四平</a></li>
 <li><a href="">松原</a></li>
 <li><a href="">白城</a></li>
 </ul>
 </div>
 </div>
 <div class="mapTipText mapTipText2">
 <div class="mapTipImg"><img src="images/liaoning.jpg" alt=""/></div>
 <div class="mapTipList">
 <h2><a href="">辽宁<span>Liaoning</span></a></h2>
 <ul>
 <li><a href="">大连</a></li>
 <li><a href="">丹东</a></li>
 <li><a href="">沈阳</a></li>
 <li><a href="">兴城</a></li>
 <li><a href="">葫芦岛</a></li>
 <li><a href="">绥中</a></li>
 <li><a href="">旅顺</a></li>
 <li><a href="">锦州</a></li>
 <li><a href="">抚顺</a></li>
 <li><a href="">鞍山</a></li>
 <li><a href="">本溪</a></li>
 <li><a href="">营口</a></li>
 <li><a href="">盘锦</a></li>
 <li><a href="">长兴岛</a></li>
 </ul>
 </div>
 </div>
</div>
</div>

</body>
</html>

本代码暂时实现了几个悬停显示省市,其他的省市做法同理。

以上就是为大家分享的jQuery地图map悬停显示省市代码,希望大家可以喜欢。

Javascript 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
微信JSSDK上传图片
Aug 23 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
javascript 动态生成css代码的两种方法
Mar 17 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
原生javascript单例模式的应用实例分析
Feb 23 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
jQuery超赞的评分插件(8款)
Aug 20 #Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 #Javascript
js实现鼠标点击文本框自动选中内容的方法
Aug 20 #Javascript
js实现文字在按钮上滚动的方法
Aug 20 #Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
javascript常用的方法整理
Aug 20 #Javascript
You might like
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
对python中return和print的一些理解
2017/08/18 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
怎么处理XML的中文问题
2015/03/26 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
合作意向书格式及范文
2014/03/31 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python