移动前端工作的那些事---前端制作篇之javascript篇

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

 

1、隐藏地址导航栏:

1
2
3
4
5
6
7
<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);   }
</script>

 

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

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

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

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

1
2
3
4
5
6
<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、判断是否是从主屏幕图标进入的网站。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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来确定是否是从主屏幕图标来进入网站的。这个主要是应用在webapp端还是web端进入网站的。从而 进行相应的操作。本例是navigator.standalone等于false即是从浏览器(web端)进入的网站的。那么在document文档中写 入两段代码。


4、取消浏览器默认行为:

1
2
3
4
5
6
7
8
9
  
var preventDefaultScroll = function(event)
{
 event.preventDefault();
 window.scroll(0,0);
  return false;
 };
document.addEventListener('touchmove',
preventDefaultScroll, false);

 

取消浏览器默认行为,主要是为了控制一些手势事件。让它们按照具体的需求来进行相应的操作。核心代码是

event.preventDefault();
当手指滑动(touchmove)时进行触发。关于手指事件,我会专门开一贴进行讨论。

5、手机加速度事件:

1
2
3
4
5
6
7
8
<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值的正负进行判断手机是否处于水平左右摇晃状态,从而引发动画。

篇幅问题,先介绍5例常用的,以后会慢慢添加其他js方法在移动端的应用。






      本文转自Ansue  51CTO博客,原文链接:http://blog.51cto.com/ansue/1659648,如需转载请自行联系原作者




上一篇:图计算 on nLive:Nebula 的图计算实践


下一篇:echarts中国地图点击切换到各省地图