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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
react配合antd组件实现的管理系统示例代码
Apr 24 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
25个好玩的JavaScript小游戏分享
2011/04/22 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
vue打包npm run build时候界面报错的解决
2020/08/13 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python功能键的读取方法
2015/05/28 Python
Python如何实现动态数组
2019/11/02 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
写自荐信要注意什么
2013/12/26 职场文书
策划总监岗位职责
2014/02/16 职场文书
2014年社区植树节活动方案
2014/02/28 职场文书
广告学专业求职信
2014/06/19 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年测量员工作总结
2015/05/23 职场文书
死亡诗社观后感
2015/06/05 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS