JavaScript地圖拖動(dòng)功能SpryMap的簡單實(shí)現(xiàn)

更新時(shí)間：2013年07月17日 16:48:34 作者：

SpryMap是一個(gè)獨(dú)立的并且是輕量級(jí)的JavaScript類庫，它不依賴于任何其他的JS框架

使用它你可以輕松實(shí)現(xiàn)類似Google、百度地圖的拖動(dòng)效果，對(duì)于要展示大圖時(shí)使用SpryMap是再好不過的了。SpryMap的定制性也很高，通過參數(shù)可以設(shè)置圖片的起始位置、CSS樣式等等。除此之外，你也可以設(shè)置是否使用平滑的拖動(dòng)效果。
如何使用
　　首先在head中加載SpryMap的腳本文件

復(fù)制代碼代碼如下:

　　在頁面中添加要顯示的圖片，如設(shè)置id為worldMap的img標(biāo)簽

復(fù)制代碼代碼如下:

　　最后在頁面加載時(shí)初始化

復(fù)制代碼代碼如下:

var map = new SpryMap({id : "worldMap",
                             height: 400,
                             width: 800,
                             startX: 200,
                             startY: 200,
                             cssClass: "mappy"});

您可能感興趣的文章:

相關(guān)文章

JavaScript手寫源碼之實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一點(diǎn)的幫助，需要的可以參考一下
2023-02-02
xmlplus組件設(shè)計(jì)系列之文本框（TextBox)（3）
xmlplus 是一個(gè)JavaScript框架，用于快速開發(fā)前后端項(xiàng)目。這篇文章主要介紹了xmlplus組件設(shè)計(jì)系列之文本框，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
js調(diào)用屏幕寬度的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用屏幕寬度的簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
小程序中如何繪制思維導(dǎo)圖詳解
小程序相信大家應(yīng)該都很熟悉了,對(duì)于小程序的整個(gè)運(yùn)營的方法,很多運(yùn)營都比較關(guān)注,今天希望通過一個(gè)思維導(dǎo)圖,這篇文章主要給大家介紹了關(guān)于小程序中如何繪制思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下
2021-10-10
javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔問題解析
這篇文章主要介紹了javascript基本數(shù)據(jù)類型和對(duì)象類型歸檔,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-03-03
JavaScript語法高亮插件highlight.js用法詳解【附highlight.js本站下載】
這篇文章主要介紹了JavaScript語法高亮庫highlight.js用法,詳細(xì)分析了highlight.js的下載、調(diào)用及具體使用技巧,需要的朋友可以參考下
2016-11-11
JavaScript基礎(chǔ)之靜態(tài)方法和實(shí)例方法分析
這篇文章主要介紹了JavaScript基礎(chǔ)之靜態(tài)方法和實(shí)例方法,簡單分析了javascript靜態(tài)方法及實(shí)例方法的定義、使用相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2018-12-12
基于JavaScript實(shí)現(xiàn)輪播圖原理及示例
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)輪播圖原理及示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
Javascript下IE與Firefox下的差異兼容寫法總結(jié)
總結(jié)一部分IE和Firefox的javascript差異寫法，對(duì)于像書寫多瀏覽器兼容性更好的代碼，可以參考下。
2010-06-06
uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)
這篇文章主要介紹了uniapp自定義驗(yàn)證碼輸入框隱藏光標(biāo),效果是點(diǎn)擊輸入框喚起鍵盤，藍(lán)框就相當(dāng)于input的光標(biāo)，驗(yàn)證碼輸入錯(cuò)誤或者不符合格式要求會(huì)將字體以及邊框改成紅色提示持續(xù)1s然后清空數(shù)據(jù)，恢復(fù)原邊框樣式，需要的朋友可以參考下
2023-02-02