JavaScript地图拖动功能SpryMap的简单实现_javascript技巧

使用它你可以轻松实现类似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"});

时间: 2024-09-07 23:25:26

JavaScript地图拖动功能SpryMap的简单实现_javascript技巧的相关文章

Javascript实现跑马灯效果的简单实例_javascript技巧

页面html: <div> <div id="imgShows" runat="server" style="padding-bottom: 10px;"> <div id="demo" style="overflow: hidden; width: 100%; height: 190px"> <table cellspacing="0" cel

JavaScript实现九九乘法表的简单实例_javascript技巧

每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

Javascript农历与公历相互转换的简单实例_javascript技巧

如下所示: /**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_YEAR : 1891, MAX_YEAR : 2100, lunarInfo : [ [0,2,9, 21936], [6,1,30, 9656], [0,2,17, 9584], [0,2,6, 21168], [5,1,26,43344], [0,2,13,59728], [0,2,

javascript实现二级级联菜单的简单制作_javascript技巧

本文实例讲述了javascript实现二级级联菜单的简单制作方法.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="pragma" content="

javascript 可以拖动的DIV(二)_javascript技巧

function beginDrag(elementToDrag,event) { var =event.clientX-parseInt(elementToDrag.style.left); var deltaY=event.clientY-parseInt(elementToDrag.style.top); //这儿的deltaX/Y实际上就是得出鼠标和div的坐标差. if(document.addEventListener) //之所以在这儿加这样一个判断,是因为IE6和firefox对

javascript 哈希表(hashtable)的简单实现_javascript技巧

首先简单的介绍关于属性的一些方法: 属性的枚举: for/in循环是遍历对象属性的方法.如 复制代码 代码如下: var obj = { name : 'obj1', age : 20, height : '176cm' } var str = ''; for(var name in obj) { str += name + ':' + obj[name] + '\n'; } alert(str); 输出为:name:obj1 age:20 height:176cm 检查属性是否存在: in运算

javascript下查找父节点的简单方法_javascript技巧

<div>        <a href="#">标题</a>        <ul id="demo">            <li><a href="#" onclick="selectThisItem(this)">项目一</a></li>                <ul>                 

javascript实现数字+字母验证码的简单实例_javascript技巧

实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=

JavaScript中发布/订阅模式的简单实例_javascript技巧

上次研究观察者模式,很多文章说它也叫Subscribe/Publish(发布/订阅模式).可在<Javascript设计模式>一书中,这两种模式还是有些区别的.书中原话如下: 1.Observer模式要求希望接收到主题通知者的观察者必须订阅内容改变的事件. 2.Subscribe/Publish模式使用了一个主题/事件通道,这个通道介于订阅者和发布者之间.该事件系统允许代码定义应用程序的特定事件,该事件可以传递自定义参数,自定义参数包含订阅者所需要的值.其目的是避免订阅者和发布者产生依赖关系.