這里能搜索到更多你想要的范文→
當前位置: 好范文網 > 免費論文 > 其他免費論文 >

基于HTML5的新農大APP設計與實現

發布時間:2018-12-04 12:09:23 作者:陳獨秀 審核編輯:本站小編 點擊:下載該Word文檔收藏本文

基于HTML5的新農大APP設計與實現

譚奎 新疆農業大學 新疆維吾爾自治區烏魯木齊市 830091

摘要:隨著智能手機的普遍,同學們使用網絡地圖的頻率高于使用傳統地圖的頻率。為了文中設計和實現了一種基于HTML5的新農大APP設計與實現。該系統技術包括HTML5JavaScriptCSS。利用移動設備手勢事件庫Touch.js實現基本事件和基本手勢,用戶可在移動端上體驗原生Android系統操作。該方案具有可擴展性強、兼容性強、視圖化可操作、簡單易用、推廣價值高等優點,不僅能夠有效提升用戶體驗,更可保障智能手機的兼容性。

關鍵詞:移動WebAPP 兼容性 HTML5 用戶體驗  

0引言

隨著國家對我校教育的重視以及對我校教育的增加,學校的招生規模越來越大。在原來教育規模上的一對多發展為多處辦學,學校新建樓宇。為了方便廣大同學更快熟悉校園環境,更快了解校園路線,建立校園地圖服務系統顯然是個快捷方便的選擇。本系統的開發,為新入學的學生提供一個方便快捷的生活方式。由于農大校園較大,一些比較偏僻的樓宇,在校外有校醫院等新同學找不到教學樓,導致上課遲到的情況。因此這個系統只為了方便學生找到目標建筑物,成為一個實用的校園導航系統,為學生提供一個便捷的生活環境,同時也為宣揚校園文化有一定幫助。當前的導航服務特點較為極端,無法彰顯出本校的風采,也不能采集完整的信息。所以在本項目中我們著重究以校內地圖導航為載體,對校內的學院,教學樓等信息有全面的描述。本項目將設計實現出具有瀏覽功能的校園電子地圖并加以圖文介紹。實現的基本功能有1)地圖的移動可以迅速鎖定目的地。2)地圖的縮放方便用戶觀察目的地的周邊情況和學校環境的具體情況。(3)校園信息簡介:向用戶顯示圖文信息。

前期準備

制作該設計首先需要收集校園的相關資料,將平面的圖進行處理整合。此外需要針對實地場景進行拍攝,并且將照片進行處理,便于后期制作圖文資料。由于校園較大使得數據量巨大,需要對整體校園進行區域劃分。按照各學院分布情況,搜集資料

1系統整體結構設計

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校園信息展示方式 

結合下拉菜單與模態框,將各類信息進行分類展示。

模態框:

//下拉菜單

學院簡介

<selectname="inv_payee"id="ECS_INVPAYEE" onchange="show(this.options[this.options.selectedIndex].value);"

//信息展示

document.getElementById("modal").style.display = "";var img = new Image(); 

img.src = "";var imgContainer = document.getElementById("addimage");  

imgContainer.appendChild(img);;var data = {};}

2界面UI設計

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:3px solid #ccc; margin-top:20px;width: 45%; text-align: center;display: block;

//對按鈕的設計

background: #3498db;border-radius: 28px;color: #ffffff;font-size: 4px;padding: 12px 30px

該系統的流程是:利用JS的響應事件來關聯到地圖的相關操作。通過使用H5+Downloader可以在第一次使用此系統時將圖片資源下載到本地路徑中。在以后的使用中可以直接從本地獲取,加快訪問速度。我們在對圖片的加載中做了動態加載處理,下載時對成功失敗進行判定,HTMLCSS負責下拉框及其樣式,JS中的模態框用來顯示點擊后的響應具體頁面。當用戶點擊選項框時,先彈出模態框,在模態框中將所選的圖片對象傳入div容器,再將用戶所選圖文信息展示出來。

3結束語

本文設計了基于HTML5的新農大APP,這種校園地圖數字化的實現,結合了傳統地圖的樣式借助移動端Web APP,打造電子校園地圖的服務平臺,為使用者提供一個即時更新,使用方便的校內“指南針”。方便校園學生即時搜索地點信息,校園地圖讓大家的校園之旅更加便捷構建校園良好的學習和生活氛圍。


該篇基于HTML5的新農大APP設計與實現范文,全文共有1332個字。好范文網為全國范文類知名網站,下載全文稍作修改便可使用,即刻完成寫稿任務。下載全文:

好范文在線客服
  • 問題咨詢 QQ
  • 投訴建議 QQ
  • 常見幫助 QQ
  • 13057850505
广西快乐10分开奖视频 心水一点是什么字 血战麻将怎么翻倍 大数据 股票 山西麻将扣点点代理 广西快乐10分开奖结果查询 在线股票配资平台 能下分的捕鱼平台 哈灵麻将官方网 下载福建快三助手下载 排列三的开奖号码 四川麻将技巧八 488铁算结果开奖结果小说 快乐10分中奖规则金额 熊猫麻将作弊器安卓 中超免费直播视频3 湖南麻将怎么打