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 相关文章推荐
js中eval详解
Mar 30 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
jquery if条件语句的写法
May 19 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
详解微信小程序Page中data数据操作和函数调用
Sep 27 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
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
新版PHP极大的增强功能和性能
2006/10/09 PHP
我的论坛源代码(六)
2006/10/09 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
详解php用static方法的原因
2018/09/12 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Vue 3.0 前瞻Vue Function API新特性体验
2019/08/12 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
PyQt5每天必学之组合框
2018/04/20 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Python重新加载模块的实现方法
2018/10/16 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
合作协议书范本
2014/04/17 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
求职信的正确写法
2014/07/10 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js