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 相关文章推荐
一个获取第n个元素节点的js函数
Sep 02 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
JS实现带阴历的日历功能详解
Jan 24 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
完美实现js选项卡切换效果(二)
2017/03/08 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
javascript验证form表单数据的案例详解
2019/03/25 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
Python安装pycurl失败的解决方法
2018/10/15 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
internal修饰符起什么作用
2013/12/16 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
法律专业实习鉴定
2013/12/22 职场文书
感恩寄语大全
2014/04/11 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
五年级作文之想象作文
2019/10/30 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
Python OpenCV超详细讲解基本功能
2022/04/02 Python
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏