基于HTML5的新农大APP设计与实现.doc

基于HTML5的新农大APP设计与实现 基于HTML5的新农大APP设计与实现 关键词：移动WebAPP兼容性HTML5用户体验 随着国家对我校的重视以及对我校教育的增加，学校的招生规模越来越大。在原来教育规模上的一对多发展为多处办学，学校新建了楼宇。为了方便广大同学更快熟悉校园环境，更快了解校园路线，建立校园地图服务系统显然是个快捷方便的选择。本系统的开发，为新入学的学生提供一个方便快捷的生活方式。由于农大校园较大，有一些比较偏僻的楼宇，在校外还有校医院等。新同学找不到楼，导致上课迟到的情况。因此这个系统只为了方便学生找到目标建筑物，成为一个实用的校园导航系统，为学生提供一个便捷的生活环境，同时也为宣扬校园文化有一定帮助。当前的导航服务特点较为极端，无法彰显出本校的风采，也不能采集完整的。所以在本项目中我们着重究以校内地图导航为载体，对校内的学院，教学楼等信息有全面的描述。本项目将设计实现出具有浏览功能的校园电子地图并加以图文介绍。实现的基本功能有（1）地图的移动：可以迅速锁定目的地。（2）地图的缩放：方便用户观察目的地的周边情况和学校环境的具体情况。（3）校园信息简介：向用户显示图文信息。 制作该设计首先需要收集校园的相关资料，将平面的地图进行处理整合。此外需要针对实地场景进行拍摄，并且将照片进行处理，便于后期制作图文资料。由于校园较大，使得数据量巨大，需要对整体校园进行区域划分。按照各学院分布情况，搜集资料。 1.1手势缩放功能与移动功能的实现 缩放：transformStyle=scale(+cat.touchjs.scaleVal+)rotate(+cat.touchjs.rotateVal+deg); 拖动：$targetObj.css(left,cat.touchjs.left+ev.x).css(top,cat.touchjs.top+ev.y); 1.2校园信息展示方式 结合下拉菜单与模态框，将各类信息进行分类展示。 模态框： /下拉菜单 学院简介 经济与贸易学院 /信息展示 document.getElementById(modal).style.display=;varimg=newImage(); img.src=;varimgContainer=document.getElementById(addimage); imgContainer.appendChild(img);vardata=; background-image:url(img/background.png);background-size:cover;background-repeat:no-repeat;background-attachment:fixed; style=background:#28A745;color:#FFFFFF;height:30px;border-radius:10px;border:3pxsolid#c;margin-top:20px;width:45%;text-align:center;display:block; /对按钮的设计 background:#3498db;border-radius:28px;color:#ffffff;font-size:4px;padding:12px30px 该系统的流程是：利用JS的响应事件来关联到地图的相关操作。通过使用H5+Downloader可以在第一次使用此系统时将图片资源下载到本地路径中。在以后的使用中可以直接从本地获取，加快访问速度。我们在对图片的加载中做了动态加载处理，下载时对成功失败进行判定，HTML和CSS负责下拉框及其样式，JS中的模态框用来显示点击后的响应具体页面。当用户点击选项框时，先弹出模态框，在模态框中将所选的图片对象传入div容器，再将用户所选图文信息展示出来。 本文设计了基于HTML5的新农大APP，这种将校园地图数字化的实现，结合了传统地图的样式，借助移动端WebAPP，打