JavaScript地图拖动功能SpryMap的简单实现


Posted in Javascript onJuly 17, 2013

使用它你可以轻松实现类似Google、百度地图的拖动效果,对于要展示大图时使用SpryMap是再好不过的了。SpryMap的定制性也很高,通过参数可以设置图片的起始位置、CSS样式等等。除此之外,你也可以设置是否使用平滑的拖动效果。
    如何使用

首先在head中加载SpryMap的脚本文件

<script type="text/javascript" src="spryMap-min2.js"></script>

在页面中添加要显示的图片,如设置id为worldMap的img标签

<img id="worldMap" src="map.jpg"/>

最后在页面加载时初始化

var map = new SpryMap({id : "worldMap",
                             height: 400,
                             width: 800,
                             startX: 200,
                             startY: 200,
                             cssClass: "mappy"});
Javascript 相关文章推荐
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
JavaScript数值数组排序示例分享
May 27 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
angular forEach方法遍历源码解读
Jan 25 Javascript
快速实现jQuery多级菜单效果
Feb 01 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
原生js实现购物车功能
Sep 23 Javascript
js导出格式化的excel 实例方法
Jul 17 #Javascript
js检查页面上有无重复id的实现代码
Jul 17 #Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 #Javascript
jcrop基本参数一览
Jul 16 #Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
Jul 16 #Javascript
jquery特效 幻灯片效果示例代码
Jul 16 #Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 #Javascript
You might like
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
教师自我评价范例
2013/09/24 职场文书
初中化学教学反思
2014/01/23 职场文书
打架检讨书300字
2014/02/02 职场文书
高中生操行评语
2014/04/25 职场文书
读书之星事迹材料
2014/05/12 职场文书
幼儿园课题实施方案
2014/05/14 职场文书
大学生找工作求职信
2014/07/09 职场文书
爱的奉献演讲稿
2014/09/10 职场文书