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

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

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

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

　　最后在頁面加載時初始化

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

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

您可能感興趣的文章:

相關(guān)文章

javascript使用閉包模擬對象的私有屬性和方法
本文給大家簡單介紹了在一個項目中涉及到的javascript使用閉包模擬對象的私有屬性和方法，這里記錄下來，分享給大家。
2016-10-10
js 隨機數(shù)代碼大全
很多情況下，需要用到隨機數(shù)，腳本之家特為大家整理了一些具體的使用與說明。
2010-08-08
js獲取鼠標位置實例詳解
這篇文章主要介紹了js獲取鼠標位置的方法,結(jié)合實例形式詳細分析了JavaScript響應(yīng)鼠標事件獲取并操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
js data日期初始化的5種方法
本文為大家介紹下js data日期初始化的常用5種方法，感興趣的朋友可以參考下
2013-12-12
一個多瀏覽器支持的背景變暗的div并可拖動提示窗口功能的代碼
兼容IE、Firefox、Opera前幾天在網(wǎng)上找了許多資料，看了不少兄弟的源碼，一直找不到合適的，要不就是拖動有問題，要不就是不兼容Firefox，所以自已寫了一個，下面是代碼：
2008-04-04
js停止冒泡和阻止瀏覽器默認行為的簡單方法
下面小編就為大家?guī)硪黄猨s停止冒泡和阻止瀏覽器默認行為的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-05-05
JavaScript中ahooks?處理?DOM?的方法
這篇文章主要介紹了JavaScript中ahooks處理DOM的方法，主要通過ahooks對DOM類Hooks使用規(guī)范，以及源碼中是如何去做處理的，具體詳細介紹需要的小伙伴可以參考一下下面文章內(nèi)容
2022-06-06
原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
這篇文章主要介紹了原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-06-06
js判斷樣式className同時增加class或刪除class
用正則表達式判斷多個class之間是否存在真正的class（前后空格的處理)然后增加class刪除class，本文給予實現(xiàn)方法，感興趣的朋友可以了解下，或許對你有所幫助
2013-01-01
微信小程序?qū)崿F(xiàn)自定義加載圖標功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)自定義加載圖標功能，非常不錯具有一定的參考借鑒價值，需要的朋友參考下吧
2018-07-07