javascript(简称js)语言在移动前端应用很广。可以说必不可少，许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子：

1、隐藏地址导航栏：

<script type="text/javascript">

// 该函数由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);
    }

以上代码是针对IOS系统的移动端收缩地址导航栏作用的（部分安卓机也可以）。核心代码其实就是一句：

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

利用定时器，将窗口移动到内容端的最上端。从而隐掉地址导航栏。

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

<script type="text/javascript">

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 type="text/javascript">

if ('standalone' in navigator && !navigator.standalone && (/iphone|ipod|ipad/gi).test(navigator.platform) && (/Safari/i).test(navigator.appVersion) && window.orientation==||window.orientation==-) {

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

这个例子中，是通过获取手机加速度，来进行一个动画的实例。在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>°旋转</title>

</head>

<body style="overflow:hidden;padding:0; margin:0;">

    <div id="stage">

        <div id="bg">

            <img id="phone" src="data:images/360pic1.jpg" />

        </div>

    </div>

    <span id="toleft">往左转</span>

    <span id="toright">往右转</span>

<script type="text/javascript">

 var c_i = ;

 var c1=new Array();

 //创建数组，i的数量是图片的总数；进行for循环。

 for(var i=;i<=;i++){

  c1[i]=new Image();

  c1[i].src="data:images/360pic"+i+".jpg";

 }

 //定义要360度旋转的对象

 var main_swipe = document.getElementByIdx_x("phone");

 //创建滑动的基本距离和滑动方法属性。

 var defaults = {

  threshold: {

  x: ,

  y:

  },

  swipeLeft: function() {showPicLeft();},

  swipeRight: function() {showPicRight();},

 };

 //定义初始坐标

 var originalCoord = { x: , y:  };

 var shiftCoord = { x: , y:  };

 var finalCoord = { x: , y:  };

 main_swipe.addEventListener("touchstart",function(event) {

  //定义滑动初始时的坐标

  originalCoord.x = event.targetTouches[].pageX;

  originalCoord.y = event.targetTouches[].pageY;

  shiftCoord.x = event.targetTouches[].pageX;

  shiftCoord.y = event.targetTouches[].pageY;

  finalCoord.x = originalCoord.x;

  finalCoord.y = originalCoord.y;

 }, false);

 main_swipe.addEventListener("touchmove",function(event) {

  //定义滑动中的坐标

  event.preventDefault();

  finalCoord.x = event.targetTouches[].pageX;

  finalCoord.y = event.targetTouches[].pageY;

  //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。

  if(finalCoord.x - shiftCoord.x > ){

     window.clearInterval(zidongright);

     window.clearInterval(zidongleft);

     panduanleft=false;

     panduanright=false;

     defaults.swipeLeft();

     shiftCoord.x = finalCoord.x;

  }else if(finalCoord.x - shiftCoord.x < -){

    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*-)) {

   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*-)) {

      window.clearInterval(zidongright);

      window.clearInterval(zidongleft);

      panduanleft=false;

      panduanright=false;

      defaults.swipeLeft();

   }

  }

 }

 , false);

 //向左滑动方法

 var showPicLeft = function(){

  c_i--;

  if(c_i < ){

   c_i = ;

   };

  document.getElementByIdx_x("phone").src = c1[c_i].src;

 }

 //向右滑动方法

 var showPicRight = function(){

  c_i++;

  if(c_i > ){

    c_i = ;

  };

  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()},);

     }

   panduanleft=true;

   panduanright=false;

 },false);

 //添加向右自动滑动功能

 document.getElementByIdx_x("toright").addEventListener("touchstart",function(event){

    window.clearInterval(zidongleft);

    if(panduanright==false){

      zidongright=setInterval(function(){defaults.swipeRight()},);

      }

    panduanright=true;

    panduanleft=false;

 },false);

</script>

</body>

</html>

//代码中，定义了一个元素main_swipe，这个元素就是要进行手势操作的对象。

 main_swipe.addEventListener("touchstart",function(event) {

  //定义滑动初始时的坐标

  originalCoord.x = event.targetTouches[].pageX;

  originalCoord.y = event.targetTouches[].pageY;

  shiftCoord.x = event.targetTouches[].pageX;

  shiftCoord.y = event.targetTouches[].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[].pageX;

  finalCoord.y = event.targetTouches[].pageY;

  //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。

  if(finalCoord.x - shiftCoord.x > ){

     window.clearInterval(zidongright);

     window.clearInterval(zidongleft);

     panduanleft=false;

     panduanright=false;

     defaults.swipeLeft();

     shiftCoord.x = finalCoord.x;

  }else if(finalCoord.x - shiftCoord.x < -){

     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*-)) {

   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*-)) {

      window.clearInterval(zidongright);

      window.clearInterval(zidongleft);

      panduanleft=false;

      panduanright=false;

      defaults.swipeLeft();

   }

  }

 }

 , false);

以上的效果，就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。

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

移动端开发——javascript的更多相关文章

  1. web移动端开发技巧与注意事项汇总

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

  2. Twitter Bootstrap 3.0 正式发布，更好地支持移动端开发

    Twitter Bootstrap 3.0 终于正式发布了.这是一个圆滑的,直观的和强大的移动优先的前端框架,用于更快,更容易的 Web 开发.几乎一切都已经被重新设计和重建,更好的支持移动端设备. ...

  3. 11-移动端开发教程-zepto.js入门教程

    Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...

  4. 【译】使用 Flutter 实现跨平台移动端开发

    作者: Mike Bluestein   | 原文地址:[https://www.smashingmagazine.com/2018/06/google-flutter-mobile-developm ...

  5. web移动端开发技巧

    一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, m ...

  6. 移动端开发demo—移动端web相册（一）

    本文主要是介绍开发移动端web相册这样一案例用到的前置知识. 一.移动端样式 移动端更接近手机原生的方式. 如下是一个angular mobile的demo的例子: 移动端demo做成这样的好处: 在 ...

  7. 29.html5 移动端开发总结

    手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视 ...

  8. htm5移动端开发 和 pc端开发

    htm5移动端开发: 移动端开发需要注意的一些事情:http://www.duanliang920.com/learn/web/html5/321.html HTML5移动端手机网站开发流程:http ...

  9. html5 移动端开发

    移动端开发总结     目录 1.手机与浏览器 2.Viewport(视窗) 3. 媒体查询 4.px,em,rem,pt 5.设备像素比devicePixelRatio 6.移动web中的图标及字体 ...

随机推荐

  1. 19.状态者模式(State Pattern)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. POJ3694 Network(Tarjan双联通分图 LCA 桥)

    链接:http://poj.org/problem?id=3694 题意:给定一个有向连通图,每次增加一条边,求剩下的桥的数量. 思路: 给定一个无向连通图,添加一条u->v的边,求此边对图剩余 ...

  3. Convert Object to XML using LINQ

    Convert Object to XML using LINQ. Also the object contains other object list. Following is the Class ...

  4. Android仿360手机卫士悬浮窗效果

    请看下图:                         首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下 ...

  5. Input对象的type类型

    Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=text        输入类型是text ...

  6. 各种编码问题产生原因以及解决办法---------响应编码，请求编码，URL编码

     响应编码 产生原因以及解决办法: 示例: package cn.yzu; import java.io.IOException; import javax.servlet.ServletExcept ...

  7. jsp include指令

    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"% ...

  8. dreamwaver cs6 主题配色方案

    这是css代码效果 这是js效果 这是html效果 使用方法:1.将下列代码自制到一个文本文档中,将文档命名为Colors.xml. 2.将Colors.xml放到C:\Users\tom\AppDa ...

  9. iOS10 UI教程视图的中心位置

    iOS10 UI教程视图的中心位置 center表示的是视图的中心位置属性,这个属性在相对的UI层次结构上工作,和frame类似.center属性是一个在父视图上定义视图的位置的简便方法.center ...

  10. AngularJS 指令（使浏览器认识自己定义的标签）

    对于angular js还有其强大之处,可以利用angular js的指令来自定义许多标签.下面是一个实例: 自定一个名为hello标签,视图如下: <div ng-app="myAp ...