javascript
移动端开发——javascript
??javascript(簡稱js)語言在移動前端應(yīng)用很廣。可以說必不可少，許多效果都是和js相關(guān)的。包括現(xiàn)在移動端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。這些都是基于js而進(jìn)行編寫的。這篇暫時不討論這些框架。以后會慢慢介紹其中的一兩個框架的具體使用方法。這篇主要討論一下部分常用的js事件在移動端的使用。舉幾個例子：
?
1、隱藏地址導(dǎo)航欄：
<script type="text/javascript">
// 該函數(shù)由Simon Willison編寫,它只有一個參數(shù),該參數(shù)表示被調(diào)用的函數(shù)名(在頁面加載完畢時執(zhí)行的函數(shù)的名字)?????
function addLoadEvent(func) {var oldOnload = window.onload;if (typeof window.onload != 'function') {window.onload = func;}else {window.onload = function() {oldOnload();func();}}}// 添加Load事件處理
????addLoadEvent(hideMenu);
????function hideMenu() {
????????setTimeout("window.scrollTo(0, 0)", 1);
????}
?
以上代碼是針對IOS系統(tǒng)的移動端收縮地址導(dǎo)航欄作用的（部分安卓機(jī)也可以）。核心代碼其實就是一句：
setTimeout("window.scrollTo(0, 0)", 1);
利用定時器，將窗口移動到內(nèi)容端的最上端。從而隱掉地址導(dǎo)航欄。
2、判斷手機(jī)橫豎屏狀態(tài)：
<script type="text/javascript">
? ?function hengshuping(){ ?
??????if(window.orientation==180||window.orientation==0){
????????alert("豎屏狀態(tài)！")???????
???} if(window.orientation==90||window.orientation==-90){
????????alert("橫屏狀態(tài)！")???????? ????}
??}
?window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); </script>
移動端的瀏覽器一般都支持window.orientation這個參數(shù)，通過這個參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。從而根據(jù)實際需求而執(zhí)行相應(yīng)的程序。通過添加監(jiān)聽事件onorientationchange，進(jìn)行執(zhí)行就可以了。
3、判斷是否是從主屏幕圖標(biāo)進(jìn)入的網(wǎng)站。
<script type="text/javascript"> if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) && window.orientation==90||window.orientation==-90) {document.write('<link rel="stylesheet" href="css/add2home.css">');document.write('<script type="application\/javascript" src="js/add2home.js" charset="utf-8"><\/s' + 'cript>');} </script>通過判斷navigator.standalone來確定是否是從主屏幕圖標(biāo)來進(jìn)入網(wǎng)站的。這個主要是應(yīng)用在webapp端還是web端進(jìn)入網(wǎng)站的。從而進(jìn)行相應(yīng)的操作。本例是navigator.standalone等于false即是從瀏覽器（web端）進(jìn)入的網(wǎng)站的。那么在document文檔中寫入兩段代碼。
4、取消瀏覽器默認(rèn)行為：
?var preventDefaultScroll?= function(event) { ????????
???? event.preventDefault(); ????????
???? window.scroll(0,0); ????????
???? return false; ????
? }; ? ?
? document.addEventListener('touchmove', preventDefaultScroll, false);
?
取消瀏覽器默認(rèn)行為，主要是為了控制一些手勢事件。讓它們按照具體的需求來進(jìn)行相應(yīng)的操作。核心代碼是
event.preventDefault(); 當(dāng)手指滑動（touchmove）時進(jìn)行觸發(fā)。
5.手機(jī)加速度事件
<script type="text/javascript">var page=1; var xx=0; var jishu=0; function deviceMotionHandler(eventData) { var acceleration = eventData.accelerationIncludingGravity; var zhuanhouX=Math.round(acceleration.x); if(xx-zhuanhouX>3||xx-zhuanhouX<-3){ xx=zhuanhouX; jishu++; } if(jishu>10){ var imgshu=$("#yidongDiv").find("img").length; var yidongJuli=$("#rongqi").width(); if(!$("#yidongDiv").is(":animated")){ if(page==imgshu){ $("#yidongDiv").animate({left:'0px'},500) page=1; $("#changwenzi").attr("src","images/wenzi1.png") } else{ $("#yidongDiv").animate({left:'-='+yidongJuli},500) $("#changwenzi").attr("src","images/wenzi"+(page+1)+".png") page++; } } jishu=0; xx=0; }; } window.addEventListener('devicemotion', deviceMotionHandler, false); </script>?
這個例子中，是通過獲取手機(jī)加速度，來進(jìn)行一個動畫的實例。在IOS5以上版本已經(jīng)可以支持devicemotion事件。android4.0也開始支持這個事件。eventData.accelerationIncludingGravity這個屬性獲取到的是一組數(shù)值
它包括X\Y\Z軸的一個數(shù)組。通過對var zhuanhouX=Math.round(acceleration.x);X值的正負(fù)進(jìn)行判斷手機(jī)是否處于水平左右搖晃狀態(tài)，從而引發(fā)動畫。
<!DOCTYPE html> <html> <meta charset="utf-8"/> <meta name="viewport" content="width=480" /> <head> <style> #stage{width:480px;height:360px;overflow:hidden;background-color: black; } #bg {position:relative;width:480px;height:360px;overflow:hidden;background-color: red; }#phone {position:absolute;left:0px;top:0px; } </style> <title>360°旋轉(zhuǎn)</title> </head> <body style="overflow:hidden;padding:0; margin:0;"><div id="stage"><div id="bg"><img id="phone" src="images/360pic1.jpg" /></div></div><span id="toleft">往左轉(zhuǎn)</span><span id="toright">往右轉(zhuǎn)</span><script type="text/javascript">var c_i = 1;var c1=new Array();//創(chuàng)建數(shù)組，i的數(shù)量是圖片的總數(shù)；進(jìn)行for循環(huán)。for(var i=1;i<=72;i++){c1[i]=new Image();c1[i].src="images/360pic"+i+".jpg";}//定義要360度旋轉(zhuǎn)的對象var main_swipe = document.getElementByIdx_x("phone");//創(chuàng)建滑動的基本距離和滑動方法屬性。var defaults = {threshold: {x: 10,y: 30},swipeLeft: function() {showPicLeft();},swipeRight: function() {showPicRight();},};//定義初始坐標(biāo)var originalCoord = { x: 0, y: 0 };var shiftCoord = { x: 0, y: 0 };var finalCoord = { x: 0, y: 0 };main_swipe.addEventListener("touchstart",function(event) {//定義滑動初始時的坐標(biāo)originalCoord.x = event.targetTouches[0].pageX;originalCoord.y = event.targetTouches[0].pageY;shiftCoord.x = event.targetTouches[0].pageX;shiftCoord.y = event.targetTouches[0].pageY;finalCoord.x = originalCoord.x;finalCoord.y = originalCoord.y;}, false);main_swipe.addEventListener("touchmove",function(event) {//定義滑動中的坐標(biāo)event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當(dāng)橫向滑動距離大于5時，則判斷為有效滑動并執(zhí)行向左滑動的方法。反之則向向右滑動。if(finalCoord.x - shiftCoord.x > 5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeLeft();shiftCoord.x = finalCoord.x;}else if(finalCoord.x - shiftCoord.x < -5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeRight();shiftCoord.x = finalCoord.x;}}, false);main_swipe.addEventListener("touchend",function(event) {var changeY = originalCoord.y - finalCoord.y;//滑動結(jié)束時，進(jìn)行坐標(biāo)判斷。并執(zhí)行向左或是向右的方法if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {changeX = originalCoord.x - finalCoord.x;if(changeX > defaults.threshold.x) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeRight();}if(changeX < (defaults.threshold.x*-1)) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeLeft();}}}, false);//向左滑動方法var showPicLeft = function(){c_i--;if(c_i < 0){c_i = 72;};document.getElementByIdx_x("phone").src = c1[c_i].src;}//向右滑動方法var showPicRight = function(){c_i++;if(c_i > 72){c_i = 1;};document.getElementByIdx_x("phone").src = c1[c_i].src;}var zidongleft;var zidongright;var panduanleft=false;var panduanright=false;//添加向左自動滑動功能document.getElementByIdx_x("toleft").addEventListener("touchstart",function(event){window.clearInterval(zidongright);if(panduanleft==false){zidongleft=setInterval(function(){defaults.swipeLeft()},50);}panduanleft=true;panduanright=false;},false);//添加向右自動滑動功能 document.getElementByIdx_x("toright").addEventListener("touchstart",function(event){window.clearInterval(zidongleft);if(panduanright==false){zidongright=setInterval(function(){defaults.swipeRight()},50);}panduanright=true;panduanleft=false;},false);</script> </body> </html>//代碼中，定義了一個元素main_swipe，這個元素就是要進(jìn)行手勢操作的對象。main_swipe.addEventListener("touchstart",function(event) {//定義滑動初始時的坐標(biāo)originalCoord.x = event.targetTouches[0].pageX;originalCoord.y = event.targetTouches[0].pageY;shiftCoord.x = event.targetTouches[0].pageX;shiftCoord.y = event.targetTouches[0].pageY;finalCoord.x = originalCoord.x;finalCoord.y = originalCoord.y;}, false); //我們?yōu)檫@個對象添加監(jiān)聽事件，touchstart就是表示當(dāng)手指剛放到屏幕上就觸發(fā)，通過event對象我們可以獲取當(dāng)前觸摸點的坐標(biāo)。 //即event.targetTouches[0].pageX; event.targetTouches[0].pageY; //其中event.targetTouches是一個包含觸摸數(shù)據(jù)的數(shù)組。其默認(rèn)的數(shù)組第一項就是當(dāng)前的坐標(biāo)集合。 //通過event.targetTouches[0].pageX; event.targetTouches[0].pageY; //這樣，我們就可以獲取到當(dāng)前觸摸點的X和Y坐標(biāo)。//接下來我們?yōu)榱死^續(xù)獲取該元素的觸摸移動中的坐標(biāo)就要添加touchmove的事件。 main_swipe.addEventListener("touchmove",function(event) {//定義滑動中的坐標(biāo)event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當(dāng)橫向滑動距離大于5時，則判斷為有效滑動并執(zhí)行向左滑動的方法。反之則向向右滑動。if(finalCoord.x - shiftCoord.x > 5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeLeft();shiftCoord.x = finalCoord.x;}else if(finalCoord.x - shiftCoord.x < -5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeRight();shiftCoord.x = finalCoord.x;}}, false);注意，在獲取觸摸移動中的坐標(biāo)的時候，一定要先把瀏覽器的默認(rèn)行為禁止?event.preventDefault();
觸摸移動中的獲取的坐標(biāo)方法同觸摸開始的方法是一樣的。這里就不在繼續(xù)闡述。
通過條件判斷，當(dāng)touchmove時的X坐標(biāo)大于touchstart時的X坐標(biāo)，則證明用戶向右滑動，反之則向左滑動。
通過這個判斷來執(zhí)行defaults.swipeRight();或是defaults.swipeLeft();。從而實現(xiàn)360°旋轉(zhuǎn)的功能。
?
當(dāng)手指離開屏幕時，即touchend。同樣要獲取離開的坐標(biāo)，以便為下一次touchstart來進(jìn)行坐標(biāo)定義。
main_swipe.addEventListener("touchend",function(event) {var changeY = originalCoord.y - finalCoord.y;//滑動結(jié)束時，進(jìn)行坐標(biāo)判斷。并執(zhí)行向左或是向右的方法if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {changeX = originalCoord.x - finalCoord.x;if(changeX > defaults.threshold.x) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeRight();}if(changeX < (defaults.threshold.x*-1)) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleft=false;panduanright=false;defaults.swipeLeft();}}}, false);以上的效果，就是一個典型的touch手勢事件的簡單應(yīng)用。手勢應(yīng)用在移動前端應(yīng)用范圍很廣。通過實際項目操作來體會其中的用途。
?原文地址：http://blog.sina.com.cn/s/blog_3f1fc8950101g8rh.html
轉(zhuǎn)載于:https://www.cnblogs.com/mopagunda/p/4642704.html
總結(jié)
以上是生活随笔為你收集整理的移动端开发——javascript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hdu-5781 ATM Mechine
- 下一篇： 输出日志实例改成用Spring的AOP来