博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端
阅读量:5162 次
发布时间:2019-06-13

本文共 3106 字,大约阅读时间需要 10 分钟。

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);
}
</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这个属性获取到的是一组数值

它包括X\Y\Z轴的一个数组。通过对var zhuanhouX=Math.round(acceleration.x);X值的正负进行判断手机是否处于水平左右摇晃状态,从而引发动画。

转载于:https://www.cnblogs.com/fyouckworld/p/3386472.html

你可能感兴趣的文章
CocoaPod
查看>>
BZOJ 1251: 序列终结者 [splay]
查看>>
5G边缘网络虚拟化的利器:vCPE和SD-WAN
查看>>
MATLAB基础入门笔记
查看>>
【UVA】434-Matty&#39;s Blocks
查看>>
Android开发技术周报 Issue#80
查看>>
hadoop2.2.0+hive-0.10.0完全分布式安装方法
查看>>
django知识点总结
查看>>
C++ STL stack、queue和vector的使用
查看>>
使用Reporting Services时遇到的小问题
查看>>
约瑟夫问题
查看>>
Arduino 报错总结
查看>>
树莓派Android Things物联网开发:树莓派GPIO引脚图
查看>>
矩阵快速幂---BestCoder Round#8 1002
查看>>
如何将应用完美迁移至Android P版本
查看>>
【转】清空mysql一个库中的所有表的数据
查看>>
基于wxPython的python代码统计工具
查看>>
淘宝JAVA中间件Diamond详解(一)---简介&快速使用
查看>>
Hadoop HBase概念学习系列之HBase里的宽表设计概念(表设计)(二十七)
查看>>
Kettle学习系列之Kettle能做什么?(三)
查看>>