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对象创建及继承原理实例解剖
Feb 28 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
express express-session的使用小结
2018/12/12 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
在Python中定义一个常量的方法
2018/11/10 Python
在Pandas中DataFrame数据合并,连接(concat,merge,join)的实例
2019/01/29 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python 如何查找特定类型文件
2020/08/17 Python
python drf各类组件的用法和作用
2021/01/12 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
大学生求职信范文应怎么写
2014/01/01 职场文书
2014年幼儿园元旦活动方案
2014/02/13 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
就业推荐表院系意见
2015/06/05 职场文书
新学期主题班会
2015/08/17 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书