zoukankan      html  css  js  c++  java
  • 移动前端制作篇之javascript篇

    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();
    }
    }
    }
    // pepperteens.com 添加Load事件处理
    addLoadEvent(hideMenu);
    function hideMenu() {
    setTimeout(“window.scrollTo(0, 0)”, 1);
    }
    </script>

    以上代码是针对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==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 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这个属性获取到的是一组数值
    它包括XY轴的一个数组。通过对var zhuanhouX=Math.round(acceleration.x);X值的正负进行判断手机是否处于水平左右摇晃状态,从而引发动画。

    摘自:http://blog.sina.com.cn/oceanjauh

  • 相关阅读:
    poj1088 经典dp
    poj2301
    poj1050(nyoj104 zoj1074)dp问题
    hdu1003
    poj1001(高精度)
    图的深度优先遍历DFS
    jquery中attr和prop的区别
    Apache 配置域名入口路径
    关于启动定时器和取消定时器的问题
    Web攻防之XSS,CSRF,SQL注入
  • 原文地址:https://www.cnblogs.com/djdliu/p/5145341.html
Copyright © 2011-2022 走看看