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 事件流和事件绑定
Jul 16 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
前端必备神器 Snap.svg 弹动效果
Nov 10 Javascript
jQuery如何防止Ajax重复提交
Oct 14 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 Javascript
vuejs实现下拉框菜单选择
Oct 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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
javascript 树控件 比较好用
2009/06/11 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
js案例之鼠标跟随jquery版(实例讲解)
2017/07/21 jQuery
js定时器实现倒计时效果
2017/11/05 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
药学专业个人自我评价
2013/11/11 职场文书
年度考核自我评价
2014/01/25 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
股东出资协议书
2016/03/21 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python