當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

移动端开发——javascript

發布時間：2023/12/9 javascript 50 豆豆

生活随笔收集整理的這篇文章主要介紹了移动端开发——javascript 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??javascript(簡稱js)語言在移動前端應用很廣。可以說必不可少，許多效果都是和js相關的。包括現在移動端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。這些都是基于js而進行編寫的。這篇暫時不討論這些框架。以后會慢慢介紹其中的一兩個框架的具體使用方法。這篇主要討論一下部分常用的js事件在移動端的使用。舉幾個例子：

1、隱藏地址導航欄：

// 該函數由Simon Willison編寫,它只有一個參數,該參數表示被調用的函數名(在頁面加載完畢時執行的函數的名字)?????

以上代碼是針對IOS系統的移動端收縮地址導航欄作用的（部分安卓機也可以）。核心代碼其實就是一句：

setTimeout("window.scrollTo(0, 0)", 1);

利用定時器，將窗口移動到內容端的最上端。從而隱掉地址導航欄。

2、判斷手機橫豎屏狀態：

? ?function hengshuping(){ ?

??????if(window.orientation==180||window.orientation==0){

????????alert("豎屏狀態！")???????

???} if(window.orientation==90||window.orientation==-90){

????????alert("橫屏狀態！")???????? ????}

??}

?window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); </script>

移動端的瀏覽器一般都支持window.orientation這個參數，通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。從而根據實際需求而執行相應的程序。通過添加監聽事件onorientationchange，進行執行就可以了。

3、判斷是否是從主屏幕圖標進入的網站。

通過判斷navigator.standalone來確定是否是從主屏幕圖標來進入網站的。這個主要是應用在webapp端還是web端進入網站的。從而進行相應的操作。本例是navigator.standalone等于false即是從瀏覽器（web端）進入的網站的。那么在document文檔中寫入兩段代碼。

4、取消瀏覽器默認行為：

?var preventDefaultScroll?= function(event) { ????????

???? event.preventDefault(); ????????

???? window.scroll(0,0); ????????

???? return false; ????

? }; ? ?

? document.addEventListener('touchmove', preventDefaultScroll, false);

取消瀏覽器默認行為，主要是為了控制一些手勢事件。讓它們按照具體的需求來進行相應的操作。核心代碼是

event.preventDefault(); 當手指滑動（touchmove）時進行觸發。

5.手機加速度事件

這個例子中，是通過獲取手機加速度，來進行一個動畫的實例。在IOS5以上版本已經可以支持devicemotion事件。android4.0也開始支持這個事件。eventData.accelerationIncludingGravity這個屬性獲取到的是一組數值

它包括X\Y\Z軸的一個數組。通過對var zhuanhouX=Math.round(acceleration.x);X值的正負進行判斷手機是否處于水平左右搖晃狀態，從而引發動畫。

<!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°旋轉</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">往左轉</span><span id="toright">往右轉</span><script type="text/javascript">var c_i = 1;var c1=new Array();//創建數組，i的數量是圖片的總數；進行for循環。for(var i=1;i<=72;i++){c1[i]=new Image();c1[i].src="images/360pic"+i+".jpg";}//定義要360度旋轉的對象var main_swipe = document.getElementByIdx_x("phone");//創建滑動的基本距離和滑動方法屬性。var defaults = {threshold: {x: 10,y: 30},swipeLeft: function() {showPicLeft();},swipeRight: function() {showPicRight();},};//定義初始坐標var originalCoord = { x: 0, y: 0 };var shiftCoord = { x: 0, y: 0 };var finalCoord = { x: 0, y: 0 };main_swipe.addEventListener("touchstart",function(event) {//定義滑動初始時的坐標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) {//定義滑動中的坐標event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當橫向滑動距離大于5時，則判斷為有效滑動并執行向左滑動的方法。反之則向向右滑動。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;//滑動結束時，進行坐標判斷。并執行向左或是向右的方法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，這個元素就是要進行手勢操作的對象。main_swipe.addEventListener("touchstart",function(event) {//定義滑動初始時的坐標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); //我們為這個對象添加監聽事件，touchstart就是表示當手指剛放到屏幕上就觸發，通過event對象我們可以獲取當前觸摸點的坐標。 //即event.targetTouches[0].pageX; event.targetTouches[0].pageY; //其中event.targetTouches是一個包含觸摸數據的數組。其默認的數組第一項就是當前的坐標集合。 //通過event.targetTouches[0].pageX; event.targetTouches[0].pageY; //這樣，我們就可以獲取到當前觸摸點的X和Y坐標。//接下來我們為了繼續獲取該元素的觸摸移動中的坐標就要添加touchmove的事件。 main_swipe.addEventListener("touchmove",function(event) {//定義滑動中的坐標event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當橫向滑動距離大于5時，則判斷為有效滑動并執行向左滑動的方法。反之則向向右滑動。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);

注意，在獲取觸摸移動中的坐標的時候，一定要先把瀏覽器的默認行為禁止?event.preventDefault();

觸摸移動中的獲取的坐標方法同觸摸開始的方法是一樣的。這里就不在繼續闡述。

通過條件判斷，當touchmove時的X坐標大于touchstart時的X坐標，則證明用戶向右滑動，反之則向左滑動。

通過這個判斷來執行defaults.swipeRight();或是defaults.swipeLeft();。從而實現360°旋轉的功能。

當手指離開屏幕時，即touchend。同樣要獲取離開的坐標，以便為下一次touchstart來進行坐標定義。

main_swipe.addEventListener("touchend",function(event) {var changeY = originalCoord.y - finalCoord.y;//滑動結束時，進行坐標判斷。并執行向左或是向右的方法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手勢事件的簡單應用。手勢應用在移動前端應用范圍很廣。通過實際項目操作來體會其中的用途。

?原文地址：http://blog.sina.com.cn/s/blog_3f1fc8950101g8rh.html

轉載于:https://www.cnblogs.com/mopagunda/p/4642704.html

總結

以上是生活随笔為你收集整理的移动端开发——javascript的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

JavaScript

上一篇： hdu-5781 ATM Mechine
下一篇： easyui（基础布局）