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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
FireFox与IE 下js兼容触发click事件的代码
Nov 20 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery实现列表的全选功能
Mar 18 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
微信小程序实现日历功能
Nov 27 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
python list格式数据excel导出方法
2018/10/31 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
Python reques接口测试框架实现代码
2020/07/28 Python
python使用建议技巧分享(三)
2020/08/18 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
幼儿教师国培感言
2014/02/19 职场文书
预备党员表决心书
2014/03/11 职场文书
党员自我剖析材料
2014/08/31 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
初中差生评语
2014/12/29 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python