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

  • 相关阅读:
    HearthBuddy投降插件2019-11-01的使用
    正则表达式在线分析 regex online analyzer
    Tips to write better Conditionals in JavaScript
    The fileSyncDll.ps1 is not digitally signed. You cannot run this script on the current system.
    Cannot capture jmeter traffic in fiddler
    JMETER + POST + anti-forgery token
    input type color
    HearthBuddy修改系统时间
    What are all the possible values for HTTP “Content-Type” header?
    UDK性能优化
  • 原文地址:https://www.cnblogs.com/djdliu/p/5145341.html
Copyright © 2011-2022 走看看