SpryMap 讓 HTML 元素能夠像Google Maps 的拖曳效果
 |
| SpryMap 讓網頁元素能像Google Maps 的拖曳效果 |
使用方法：
第一步 載入 SpryMap 需要使用到的 JavaScript 檔案
第二步 使用 HTML 畫出套件的區域
第三步 為地圖與網頁製作 CSS 樣式
第四步 使用 JavaScript 讓 SpryMap 初始化
第一步 載入 SpryMap 需要使用到的 JavaScript 檔案
<!-- 載入 SpryMap 的主程式碼 -->
<script type="text/javascript" src="spryMap-2.js"></script>
第二步 使用 HTML 畫出套件的區域
<div class="content">
<h1>Introducing the SpryMap</h1>
<h2>展示</h2>
<img id="worldMap" src="map.jpg" alt="A map of the world." />
</div>
第三步 為地圖與網頁製作 CSS 樣式
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light",
"Helvetica Neue", sans-serif;
font-weight: 300;
background: #f8f8f8;
}
div.content {
width: 816px;
height : 700px;
margin-left: auto;
margin-right: auto;
}
div.content h1, h2, h3 {
font-weight: normal;
text-align: center;
margin: 20px;
}
div.content h1 {
font-size: 3em;
color: #2D6ABA;
}
div.content h2 {
font-size: 1.5em;
}
div.content h3 {
font-size: 1em;
}
div.content h3 a {
color: #1C4B8A;
}
.mappy {
border: 8px solid #C1D9F7;
}
第四步 使用 JavaScript 讓 SpryMap 初始化
window.onload = function() {
var map = new SpryMap({id : "worldMap", // 元素 ID
height: 400, // 展示高度
width: 800, // 展示框度
startX: 200, // 初始化的X軸
startY: 200, // 初始化的Y軸
cssClass: "mappy"}); // CSS 名稱
}
作者網站：http://candrews.net/sandbox/spryMap/
檔案大小：338 KB (包含範例)
檔案下載：http://www.candrews.net/sandbox/spryMap/spryMap.zip
備份下載：下載
檔案大小：338 KB (包含範例)
檔案下載：http://www.candrews.net/sandbox/spryMap/spryMap.zip
備份下載：下載
0 意見