jQuery地圖map懸停顯示省市代碼分享

首頁

web前端

js教程

jQuery地圖map懸停顯示省市代碼分享_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:44 PM

這是一款基於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懸停顯示省市代碼，希望大家可以喜歡。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7471

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探討了Java收藏框架的有效使用。它強調根據數據結構，性能需求和線程安全選擇適當的收集（列表，設置，地圖，隊列）。通過高效優化收集用法

初學者的打字稿，第2部分：基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後，您應該能夠在支持TypeScript的IDE中編寫自己的代碼，並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。 TypeScript在此基礎上定義了更多類型，本教程將詳細介紹所有這些類型。 Null數據類型與JavaScript一樣，TypeScript中的null

開始使用Chart.js：PIE，DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。創建餅圖和環形圖餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

See all articles

jQuery地圖map懸停顯示省市代碼分享_jquery

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題