移动端——JS（一）

javascript(简称js)语言在移动前端可以说必不可少，许多效果都是和js相关的，包括现在移动端的一些框架：jqmobi、jqtouch、sencha touch、jquerymobile等等。都是基于js编写的。

暂时不讨论这些框架，主要讨论一下部分常用的js事件在移动端的使用。举几个例子：

1、隐藏地址导航栏：

<script>

// 该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字)

    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);

    }

</script>

以上代码是针对IOS系统的移动端收缩地址导航栏作用的（部分安卓机也可以）。核心代码就一句：setTimeout("window.scrollTo(0, 0)", 1); 利用定时器，将窗口移动到内容端的最上端，从而隐掉地址导航栏。

2、判断手机横竖屏状态：

<script>

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、判断是否是从主屏幕图标进入的网站：

<script>

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来确定是否是从主屏幕图标来进入网站的。这个主要是应用在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、手机加速度事件：

<script>

 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>

例子中是通过获取手机加速度，来进行一个动画的实例。

在IOS5以上版本已经可以支持devicemotion事件。android4.0也开始支持这个事件。

eventData.accelerationIncludingGravity这个属性获取到的是一组数值，它包括X\Y\Z轴的一个数组。通过对var zhuanhouX=Math.round(acceleration.x); X值的正负进行判断手机是否处于水平左右摇晃状态，从而引发动画。

这里就介绍5例常用的，以后慢慢添加其他js方法在移动端的应用。。。

巴特西

移动端——JS（一）

最新文章

热门文章