您的位置：首页 > 移动开发

移动端开发——javascript

2015-07-13 13:55 411 查看
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);
}


以上代码是针对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值的正负进行判断手机是否处于水平左右摇晃状态，从而引发动画。

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=480" />
<head>
<style>
#stage{
width:480px;
height:360px;
overflow:hidden;
background-color: black;
}
#bg {
position:relative;
width:480px;
height:360px;
overflow:hidden;
background-color: red;
}

#phone {
position:absolute;
left:0px;
top:0px;
}
</style>
<title>360°旋转</title>
</head>
<body style="overflow:hidden;padding:0; margin:0;">
<div id="stage">
<div id="bg">
<img id="phone" src="images/360pic1.jpg" />
</div>
</div>
<span id="toleft">往左转</span>
<span id="toright">往右转</span>

<script type="text/javascript">
var c_i = 1;
var c1=new Array();
//创建数组，i的数量是图片的总数；进行for循环。
for(var i=1;i<=72;i++){
c1[i]=new Image();
c1[i].src="images/360pic"+i+".jpg";
}

//定义要360度旋转的对象
var main_swipe = document.getElementByIdx_x("phone");

//创建滑动的基本距离和滑动方法属性。
var defaults = {
threshold: {
x: 10,
y: 30
},
swipeLeft: function() {showPicLeft();},
swipeRight: function() {showPicRight();},
};
//定义初始坐标
var originalCoord = { x: 0, y: 0 };
var shiftCoord = { x: 0, y: 0 };
var finalCoord = { x: 0, y: 0 };

main_swipe.addEventListener("touchstart",function(event) {

//定义滑动初始时的坐标
originalCoord.x = event.targetTouches[0].pageX;
originalCoord.y = event.targetTouches[0].pageY;
shiftCoord.x = event.targetTouches[0].pageX;
shiftCoord.y = event.targetTouches[0].pageY;
finalCoord.x = originalCoord.x;
finalCoord.y = originalCoord.y;

}, false);

main_swipe.addEventListener("touchmove",function(event) {

//定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY;

//当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
if(finalCoord.x - shiftCoord.x > 5){
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
shiftCoord.x = finalCoord.x;

}else if(finalCoord.x - shiftCoord.x < -5){

window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x;

}
}, false);

main_swipe.addEventListener("touchend",function(event) {

var changeY = originalCoord.y - finalCoord.y;

//滑动结束时，进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {

changeX = originalCoord.x - finalCoord.x;

if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
}

if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false);

//向左滑动方法
var showPicLeft = function(){
c_i--;
if(c_i < 0){
c_i = 72;
};
document.getElementByIdx_x("phone").src = c1[c_i].src;
}

//向右滑动方法
var showPicRight = function(){
c_i++;
if(c_i > 72){
c_i = 1;
};
document.getElementByIdx_x("phone").src = c1[c_i].src;
}

var zidongleft;
var zidongright;
var panduanleft=false;
var panduanright=false;

//添加向左自动滑动功能
document.getElementByIdx_x("toleft").addEventListener("touchstart",function(event){
window.clearInterval(zidongright);
if(panduanleft==false){
zidongleft=setInterval(function(){defaults.swipeLeft()},50);
}
panduanleft=true;
panduanright=false;
},false);

//添加向右自动滑动功能
document.getElementByIdx_x("toright").addEventListener("touchstart",function(event){
window.clearInterval(zidongleft);
if(panduanright==false){
zidongright=setInterval(function(){defaults.swipeRight()},50);
}
panduanright=true;
panduanleft=false;
},false);

</script>
</body>
</html>

//代码中，定义了一个元素main_swipe，这个元素就是要进行手势操作的对象。
main_swipe.addEventListener("touchstart",function(event) {

//定义滑动初始时的坐标
originalCoord.x = event.targetTouches[0].pageX;
originalCoord.y = event.targetTouches[0].pageY;
shiftCoord.x = event.targetTouches[0].pageX;
shiftCoord.y = event.targetTouches[0].pageY;
finalCoord.x = originalCoord.x;
finalCoord.y = originalCoord.y;

}, false);
//我们为这个对象添加监听事件，touchstart就是表示当手指刚放到屏幕上就触发，通过event对象我们可以获取当前触摸点的坐标。
//即event.targetTouches[0].pageX; event.targetTouches[0].pageY;
//其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。
//通过event.targetTouches[0].pageX; event.targetTouches[0].pageY;
//这样，我们就可以获取到当前触摸点的X和Y坐标。

//接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。
main_swipe.addEventListener("touchmove",function(event) {

//定义滑动中的坐标
event.preventDefault();
finalCoord.x = event.targetTouches[0].pageX;
finalCoord.y = event.targetTouches[0].pageY;

//当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。
if(finalCoord.x - shiftCoord.x > 5){
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
shiftCoord.x = finalCoord.x;

}else if(finalCoord.x - shiftCoord.x < -5){

window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
shiftCoord.x = finalCoord.x;

}
}, false);


注意，在获取触摸移动中的坐标的时候，一定要先把浏览器的默认行为禁止 event.preventDefault();

触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。

通过条件判断，当touchmove时的X坐标大于touchstart时的X坐标，则证明用户向右滑动，反之则向左滑动。

通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。

当手指离开屏幕时，即touchend。同样要获取离开的坐标，以便为下一次touchstart来进行坐标定义。

main_swipe.addEventListener("touchend",function(event) {
var changeY = originalCoord.y - finalCoord.y;

//滑动结束时，进行坐标判断。并执行向左或是向右的方法
if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) {

changeX = originalCoord.x - finalCoord.x;

if(changeX > defaults.threshold.x) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeRight();
}

if(changeX < (defaults.threshold.x*-1)) {
window.clearInterval(zidongright);
window.clearInterval(zidongleft);
panduanleft=false;
panduanright=false;
defaults.swipeLeft();
}
}
}
, false);


以上的效果，就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。

原文地址：http://blog.sina.com.cn/s/blog_3f1fc8950101g8rh.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航