基于html5实现深圳地铁交通路线动态模拟

最近闲来无事，做了一个小Demo实现了深圳地铁交通路线动态模拟，先几张图看看吧：

 

图上的小汽车沿着规定的路径进行流动

可自由更改站点坐标，自由鼠标放大、缩小显示

 1  var LongHua_stationPoints = [       
 2                             {x: 823, y: -300, index: 0,name:"清湖",isDrag:true},
 3                             {x: 823, y: -250, index: 1,name:"龙华",isDrag:true},
 4                             {x: 823, y: -200, index: 2,name:"龙胜",isDrag:true},
 5                             {x: 823, y: -150, index: 3,name:"上塘",isDrag:true},
 6                             {x: 823, y: -100, index: 4,name:"红山",isDrag:true},
 7                             {x: 823, y: 36, index: 5,name:"深圳北站",isDrag:false},
 8                             {x: 823, y: 100, index: 6,name:"白石龙",isDrag:true},
 9                             {x: 823, y: 150, index: 7,name:"民乐",isDrag:true},
10                             {x: 823, y: 200, index: 8,name:"上梅林",isDrag:true},
11                             {x: 823, y: 250, index: 9,name:"莲花北",isDrag:true},
12                             {x: 823, y: 300, index: 10,name:"少年宫",isDrag:true},
13                             {x: 823, y: 350, index: 11,name:"市民中心",isDrag:true},
14                             {x: 823, y: 450, index: 12,name:"会展中心",isDrag:true},
15                             {x: 823, y: 600, index: 13,name:"福民",isDrag:true},
16                             {x: 823, y: 680, index: 14,name:"福田口岸",isDrag:true},
17                      ];

站点数据定义为js数组，后期可以放到数据库进行维护。

 

 

点击按钮即可方便获取修改后的站点坐标，保存到数据库。

目前做的Demo在浏览器兼容性方面未发现问题，支持各大主流浏览器（包括IE），兼容手机浏览。

 

posted @ 2015-09-30 13:52  JasonK  阅读(827)  评论(0)    收藏  举报