jQuery+html5+svg中國地圖懸停顯示省市

jQuery+html5+svg中國地圖懸停顯示省市

工具/原料

adobe dreamweaver

方法/步驟

新建html文檔。

書寫hmtl代碼。

<div class="wrap" style="margin-top: 50px;">

<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>

書寫css代碼。

<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>

書寫並添加js代碼。

<script src="js/lib/jquery-1.11.1.min.js"></script>

<script src="js/lib/raphael-min.js"></script>

<script src="js/res/chinaMapConfig.js"></script>

<script src="js/map-min.js"></script>

<script>

$(function(){

$('#ChinaMap').SVGMap({

mapWidth: 806,

mapHeight: 396

});

});

</script>

代碼整體結構。

查看效果。

相關文章

  1. jquery文章列表排滑鼠懸停顯示圖片詳細介紹

    jquery文章列表排滑鼠懸停顯示圖片詳細介紹 工具/原料 adobe dreamweaver 方法/步驟 準備好需要用到的圖標. 書寫hmtl代碼.<div id="a"& ...
  2. 如何在PPT里插入中國地圖—可改顏色、顯示數值

    在PPT里插入的地圖,可以放大縮小,可以查看具體的數值,非常棒.地圖的樣式也可以多種多樣,比如按照顏色顯示,按照氣泡大小區分等.有中國地圖.各省的地圖.還有世界地圖. 以下三步就可以把動態的地圖插入到 ...
  3. 如何在手機百度地圖中顯示曾經去過的省市

    手機中的百度地圖可以將你曾經到過的地方所在的省市都記錄下來,並展示在地圖中,自己去的地方太多了,有時候自己都已經忘記的去過的地方,百度地圖卻可以幫你記錄下來,我將通過下面步驟演示如何通過手機百度地圖查 ...
  4. 工業級GPS定位終端在電腦地圖上顯示的簡易教程

    工業級GPS定位終端,以常見的CM410為例,它是基於全球衛星定位系統的GPS定位設備,設備採用工業級GPS無線模塊,支持串口RS232接口輸出或者RS485接口輸出.可以每秒通過串口RS232接口或 ...
  5. 怎麼通過坐標在百度地圖上顯示出位置

    最近在做車輛顯示到百度地圖上,需要看到當前車輛在哪裡,那麼則需要通過當前車輛的坐標,顯示到地圖上去,怎麼做呢?通過百度提供的API來實現 工具/原料 百度地圖API的key 方法/步驟 註冊百度帳號, ...
  6. WPS(word或PPT)中如何快速插入高清中國地圖?

    WPS里有一個特殊的快捷插入工具,可以讓我們快速的插入特殊的常用圖標.比如中國地圖.安卓小人.微軟logo等,還可以插入一些其他矢量圖形. 下面,小編仔細說說這一過程如何實現. 工具/原料 WPS 方 ...
  7. 自製銷售分布中國地圖

    很多銷售總監估計會有這樣的經歷,每個季度需要統計銷售數據,分析各個地區的銷售情況以及整個中國區的細況,迫切需要製作一張銷售分布圖,可以插入到ppt中,作為會議講解,以便在下個季度對銷售做統籌部署.下面 ...
  8. 報表FineReport中如何使地圖區域顯示多個指標

    地圖可添加多個區域值,使各區域能顯示多個指標.下面就通過報表FineReport來進行介紹. 工具/原料 報表FineReport7.1.1 大小:148.2M 適用平台:windows/linux ...
  9. BI報表FineReport中如何使地圖區域顯示多個指標

    地圖可添加多個區域值,使各區域能顯示多個指標.下面就通過BI報表FineReport來進行介紹. 工具/原料 BI報表FineReport7.1.1 大小:148.2M 適用平台:windows/li ...
  10. jquery實現點擊隱藏與顯示的菜單

    jquery實現點擊隱藏與顯示的菜單 最近,學習了一下jquery,現將一款jquery實現點擊隱藏與顯示的菜單分享一下: 本實例主要用到了一個切換顯示與隱藏的事件 hover 與點擊事件 click ...
  11. 怎樣利用ArcGIS軟體畫中國地圖

    ArcGIS是一款顯示直觀.功能強大的空間分析軟體,它在地理學空間分析中起著重要的作用,然而還有相當一部分人對它還不熟悉,因此,本文就利用該軟體做出一副中國的地圖,以起到拋磚引玉的作用,也讓大家對這個 ...
  12. ApiCloud:[5]百度地圖只顯示格子

    編譯完成android應用後,發現百度地圖不能正常顯示了,只能顯示格子,雖然能顯示定位,也能夠添加標註,但是肯定是出問題了,很有可能是百度地圖key問題.因為新舊版本的交替,導致一些問題發生,建議還是 ...
  13. 中國知網顯示當前安全設置不允許下載怎麼辦

    又到了一年一季的畢業季,小夥伴們都開始寫畢業論文,很多人都會在中國知網上下載文獻查找資料.但是中國知網顯示當前安全設置不允許下載怎麼辦啦?小編和大家分享一下 工具/原料 網絡 方法/步驟 在桌面任務欄 ...
  14. Flash入門實例:[17]如何製作中國地圖動畫?

    Flash入門實例第17篇,如何製作中國地圖動畫?學習按鈕元件的製作,及Flash基礎綜合練習. 工具/原料 Flash軟體 圖片素材 方法/步驟 打開Flash軟體,新建Flash文檔,背景顏色,尺 ...
  15. web表單設計器中如何使地圖區域顯示多個指標

    地圖可添加多個區域值,使各區域能顯示多個指標.下面就通過web表單設計器FineReport來進行介紹. 工具/原料 web表單設計器FineReport7.1.1 大小:148.2M 適用平台:wi ...
  16. 教你怎麼熟悉記住中國地圖

    不知不覺,畢業已是一年有餘,隨著離開學校的時日越長,越是懷念在學校的日子. 當然在這裡不是為了回憶學校的美好生活,而是跟你分享怎麼樣,更好的熟悉我們的世界,讓你走到哪裡都知道自己身處哪裡,跟我一起來吧 ...
  17. Word2003中製作立體中國地圖

    因工作需要,有時候需要用到立體的中國地圖,但手頭沒有相關素材,想了想,就用word試著做了一個,效果還不錯,基本達到要求,最重要的是方便快捷,不需要另外安裝其它軟體. 工具/原料 Word2003 方 ...
  18. 怎樣製作人員分布圖(在地圖上顯示)

    在進行數據分析時,難免會遇到人員分布,例如,大學畢業生就業前景報告分析,公司產品在各地的銷售情況,都會涉及到人員的分布情況 以洛川蘋果在全國的銷售情況為例 工具/原料 Microsoft office ...
  19. windows10地圖不顯示打不開沒法用怎麼辦

    Windows10系統為我們提供了地圖功能,為我們提供了很大的方便,但是最近不知道什麼原因,在使用Windows10地圖的時候,卻只顯示空白而不顯示正常的地圖,這時該怎麼辦呢? 工具/原料 Windo ...
  20. 用R畫中國地圖時如何把南海做成小圖

    使用R語言繪圖 是一項非常有效率的事,因為其具備很多很全的功能,matlab也是一款繪製地圖的實用軟體,前提是把該安裝的軟體包給裝好. 工具/原料 R matlab 數據 方法/步驟 簡單介紹一個例子 ...