移动端——JS(一)

摘要:
javascript语言可以说是移动前端不可或缺的。许多效果与js有关,包括移动端的一些框架:jqmobi、jqtouch、senchatouch和jquerymobile等。我暂时不讨论这些框架,主要讨论一些常见js事件在移动端的使用函数'){window.onload=func;}否则{window.onload=函数(){oldOnload();func();}}//添加加载事件以处理addLoadEvent;函数hideMenu(){setTimeout;}上述代码用于缩小IOS系统移动端的地址导航栏。IOS 5以上的版本已经支持Devicemotion事件。以下是5个常见示例。稍后,慢慢地将其他js方法添加到移动端。。。

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

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

1、隐藏地址导航栏:

<script>
//该函数由Simon Willison编写,它只有一个参数,该参数表示被调用的函数名(在页面加载完毕时执行的函数的名字)
    functionaddLoadEvent(func) {
        var oldOnload =window.onload;
        if (typeof window.onload != 'function') {
            window.onload =func;
        }
        else{
            window.onload = function() {
                oldOnload();
                func();
            }
        }
    }
  //添加Load事件处理
addLoadEvent(hideMenu);
    functionhideMenu() {
        setTimeout("window.scrollTo(0, 0)", 1);
    }
</script>

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

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

<script>
functionhengshuping(){
  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="http://t.zoukankan.com/css/add2home.css">');
  document.write('<script type="application/javascript" src="http://t.zoukankan.com/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;
 functiondeviceMotionHandler(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这个属性获取到的是一组数值,它包括XY轴的一个数组。通过对var zhuanhouX=Math.round(acceleration.x); X值的正负进行判断手机是否处于水平左右摇晃状态,从而引发动画。

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

免责声明:文章转载自《移动端——JS(一)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MeshLab显示纹理贴图CPU亲和度下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

用gulp清除、移动、压缩、合并、替换代码

之前前端代码部署时用的是grunt,后来又出了个gulp工具,最近试用了一下,很方便,感觉比grunt简单好用,下面把一些常见的任务列一下,备用。 var gulp = require('gulp'); var sdir = '0.0.1'; var ddir = '0.0.1.release'; var gutil = require('gulp-u...

C#读取CPU序列号、硬盘ID、网卡MAC地址,生成机器码

话不多说,直接上代码,类库中的机器码使用序列号、硬盘ID、网卡MAC地址组合取MD5生成。 usingSystem; usingSystem.Linq; usingSystem.Management; usingSystem.Security.Cryptography; usingSystem.Text; namespaceWayneShao.Commo...

MongoDB基础入门003--使用官方驱动操作mongo,C#

本篇先简单介绍一下,使用官方驱动来操作MongoDB。至于MongoDB原生的增删改查语句,且等以后再慢慢学习。 一、操作MongoDB的驱动主要有两个   1.官方驱动:https://github.com/mongodb/mongo-csharp-driver/downloads,更新的还是比较及时的,目前已经支持大部门linq语法。   2.samu...

.Net魔法堂:史上最全的ActiveX开发教程——ActiveX与JS间交互篇

一、前言                             经过上几篇的学习,现在我们已经掌握了ActiveX的整个开发过程,但要发挥ActiveX的真正威力,必须依靠JS。下面一起来学习吧! 二、JS调用ActiveX方法                     只需在UserControl子类中(即自定义的ActiveX控件中),编写公共方法即可...

js获取图片信息(一)-----获取图片的原始尺寸

如何获取图片的原始尺寸大小?   如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ 100px; height: 100px; } <img src="images/test.jpg" id="oImg" alt=""> 方法一: HTML5提供了一个新属性 naturalWi...

js 时间戳转换为‘yyyy-MM-dd hh:mm’格式(es6语法)

function formatDate(date,fmt) { if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length)); } let o = { 'M+':date.getMonth...