當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

移动端开发——javascript

發(fā)布時(shí)間：2023/12/9 javascript 51 豆豆

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

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

1、隱藏地址導(dǎo)航欄：

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

以上代碼是針對(duì)IOS系統(tǒng)的移動(dòng)端收縮地址導(dǎo)航欄作用的（部分安卓機(jī)也可以）。核心代碼其實(shí)就是一句：

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

利用定時(shí)器，將窗口移動(dòng)到內(nèi)容端的最上端。從而隱掉地址導(dǎo)航欄。

2、判斷手機(jī)橫豎屏狀態(tài)：

? ?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>

移動(dòng)端的瀏覽器一般都支持window.orientation這個(gè)參數(shù)，通過這個(gè)參數(shù)可以判斷出手機(jī)是處在橫屏還是豎屏狀態(tài)。從而根據(jù)實(shí)際需求而執(zhí)行相應(yīng)的程序。通過添加監(jiān)聽事件onorientationchange，進(jìn)行執(zhí)行就可以了。

3、判斷是否是從主屏幕圖標(biāo)進(jìn)入的網(wǎng)站。

通過判斷navigator.standalone來確定是否是從主屏幕圖標(biāo)來進(jìn)入網(wǎng)站的。這個(gè)主要是應(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)手指滑動(dòng)（touchmove）時(shí)進(jìn)行觸發(fā)。

5.手機(jī)加速度事件

這個(gè)例子中，是通過獲取手機(jī)加速度，來進(jìn)行一個(gè)動(dòng)畫的實(shí)例。在IOS5以上版本已經(jīng)可以支持devicemotion事件。android4.0也開始支持這個(gè)事件。eventData.accelerationIncludingGravity這個(gè)屬性獲取到的是一組數(shù)值

它包括X\Y\Z軸的一個(gè)數(shù)組。通過對(duì)var zhuanhouX=Math.round(acceleration.x);X值的正負(fù)進(jìn)行判斷手機(jī)是否處于水平左右搖晃狀態(tài)，從而引發(fā)動(dòng)畫。

<!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)的對(duì)象var main_swipe = document.getElementByIdx_x("phone");//創(chuàng)建滑動(dòng)的基本距離和滑動(dò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) {//定義滑動(dòng)初始時(shí)的坐標(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) {//定義滑動(dòng)中的坐標(biāo)event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當(dāng)橫向滑動(dòng)距離大于5時(shí)，則判斷為有效滑動(dòng)并執(zhí)行向左滑動(dòng)的方法。反之則向向右滑動(dòng)。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;//滑動(dòng)結(jié)束時(shí)，進(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);//向左滑動(dòng)方法var showPicLeft = function(){c_i--;if(c_i < 0){c_i = 72;};document.getElementByIdx_x("phone").src = c1[c_i].src;}//向右滑動(dòng)方法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;//添加向左自動(dòng)滑動(dòng)功能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);//添加向右自動(dòng)滑動(dòng)功能 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>//代碼中，定義了一個(gè)元素main_swipe，這個(gè)元素就是要進(jìn)行手勢操作的對(duì)象。main_swipe.addEventListener("touchstart",function(event) {//定義滑動(dòng)初始時(shí)的坐標(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)檫@個(gè)對(duì)象添加監(jiān)聽事件，touchstart就是表示當(dāng)手指剛放到屏幕上就觸發(fā)，通過event對(duì)象我們可以獲取當(dāng)前觸摸點(diǎn)的坐標(biāo)。 //即event.targetTouches[0].pageX; event.targetTouches[0].pageY; //其中event.targetTouches是一個(gè)包含觸摸數(shù)據(jù)的數(shù)組。其默認(rèn)的數(shù)組第一項(xiàng)就是當(dāng)前的坐標(biāo)集合。 //通過event.targetTouches[0].pageX; event.targetTouches[0].pageY; //這樣，我們就可以獲取到當(dāng)前觸摸點(diǎn)的X和Y坐標(biāo)。//接下來我們?yōu)榱死^續(xù)獲取該元素的觸摸移動(dòng)中的坐標(biāo)就要添加touchmove的事件。 main_swipe.addEventListener("touchmove",function(event) {//定義滑動(dòng)中的坐標(biāo)event.preventDefault();finalCoord.x = event.targetTouches[0].pageX;finalCoord.y = event.targetTouches[0].pageY;//當(dāng)橫向滑動(dòng)距離大于5時(shí)，則判斷為有效滑動(dòng)并執(zhí)行向左滑動(dòng)的方法。反之則向向右滑動(dòng)。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);

注意，在獲取觸摸移動(dòng)中的坐標(biāo)的時(shí)候，一定要先把瀏覽器的默認(rèn)行為禁止?event.preventDefault();

觸摸移動(dòng)中的獲取的坐標(biāo)方法同觸摸開始的方法是一樣的。這里就不在繼續(xù)闡述。

通過條件判斷，當(dāng)touchmove時(shí)的X坐標(biāo)大于touchstart時(shí)的X坐標(biāo)，則證明用戶向右滑動(dòng)，反之則向左滑動(dòng)。

通過這個(gè)判斷來執(zhí)行defaults.swipeRight();或是defaults.swipeLeft();。從而實(shí)現(xiàn)360°旋轉(zhuǎn)的功能。

當(dāng)手指離開屏幕時(shí)，即touchend。同樣要獲取離開的坐標(biāo)，以便為下一次touchstart來進(jìn)行坐標(biāo)定義。

main_swipe.addEventListener("touchend",function(event) {var changeY = originalCoord.y - finalCoord.y;//滑動(dòng)結(jié)束時(shí)，進(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);

以上的效果，就是一個(gè)典型的touch手勢事件的簡單應(yīng)用。手勢應(yīng)用在移動(dòng)前端應(yīng)用范圍很廣。通過實(shí)際項(xiàng)目操作來體會(huì)其中的用途。

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

轉(zhuǎn)載于:https://www.cnblogs.com/mopagunda/p/4642704.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

JavaScript

上一篇： hdu-5781 ATM Mechine
下一篇： gradle idea java ssm