网站优化工具分析工具,做网站费用滁州,项目管理软件免费版,产品设计javascript(简称js)语言在移动前端应用很广。可以说必不可少#xff0c;许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使… javascript(简称js)语言在移动前端应用很广。可以说必不可少许多效果都是和js相关的。包括现在移动端的一些框架。jqmobi、jqtouch、sencha touch、jquerymobile等等。这些都是基于js而进行编写的。这篇暂时不讨论这些框架。以后会慢慢介绍其中的一两个框架的具体使用方法。这篇主要讨论一下部分常用的js事件在移动端的使用。举几个例子 1、隐藏地址导航栏 script typetext/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 typetext/javascript function hengshuping(){ if(window.orientation180||window.orientation0){ alert(竖屏状态) } if(window.orientation90||window.orientation-90){ alert(横屏状态) } } window.addEventListener(onorientationchange in window ? orientationchange : resize, hengshuping, false); /script 移动端的浏览器一般都支持window.orientation这个参数通过这个参数可以判断出手机是处在横屏还是竖屏状态。从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange进行执行就可以了。 3、判断是否是从主屏幕图标进入的网站。 script typetext/javascript
if (standalone in navigator !navigator.standalone (/iphone|ipod|ipad/gi).test(navigator.platform) (/Safari/i).test(navigator.appVersion) window.orientation90||window.orientation-90) {document.write(link relstylesheet hrefcss/add2home.css);document.write(script typeapplication\/javascript srcjs/add2home.js charsetutf-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 typetext/javascriptvar page1; var xx0; var jishu0; function deviceMotionHandler(eventData) { var acceleration eventData.accelerationIncludingGravity; var zhuanhouXMath.round(acceleration.x); if(xx-zhuanhouX3||xx-zhuanhouX-3){ xxzhuanhouX; jishu; } if(jishu10){ var imgshu$(#yidongDiv).find(img).length; var yidongJuli$(#rongqi).width(); if(!$(#yidongDiv).is(:animated)){ if(pageimgshu){ $(#yidongDiv).animate({left:0px},500) page1; $(#changwenzi).attr(src,images/wenzi1.png) } else{ $(#yidongDiv).animate({left:-yidongJuli},500) $(#changwenzi).attr(src,images/wenzi(page1).png) page; } } jishu0; xx0; }; } window.addEventListener(devicemotion, deviceMotionHandler, false); /script 这个例子中是通过获取手机加速度来进行一个动画的实例。在IOS5以上版本已经可以支持devicemotion事件。android4.0也开始支持这个事件。eventData.accelerationIncludingGravity这个属性获取到的是一组数值 它包括X\Y\Z轴的一个数组。通过对var zhuanhouXMath.round(acceleration.x);X值的正负进行判断手机是否处于水平左右摇晃状态从而引发动画。 !DOCTYPE html
html
meta charsetutf-8/
meta nameviewport contentwidth480 /
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
title360°旋转/title
/head
body styleoverflow:hidden;padding:0; margin:0;div idstagediv idbgimg idphone srcimages/360pic1.jpg //div/divspan idtoleft往左转/spanspan idtoright往右转/spanscript typetext/javascriptvar c_i 1;var c1new Array();//创建数组i的数量是图片的总数进行for循环。for(var i1;i72;i){c1[i]new Image();c1[i].srcimages/360pici.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);panduanleftfalse;panduanrightfalse;defaults.swipeLeft();shiftCoord.x finalCoord.x;}else if(finalCoord.x - shiftCoord.x -5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleftfalse;panduanrightfalse;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);panduanleftfalse;panduanrightfalse;defaults.swipeRight();}if(changeX (defaults.threshold.x*-1)) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleftfalse;panduanrightfalse;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 panduanleftfalse;var panduanrightfalse;//添加向左自动滑动功能document.getElementByIdx_x(toleft).addEventListener(touchstart,function(event){window.clearInterval(zidongright);if(panduanleftfalse){zidongleftsetInterval(function(){defaults.swipeLeft()},50);}panduanlefttrue;panduanrightfalse;},false);//添加向右自动滑动功能 document.getElementByIdx_x(toright).addEventListener(touchstart,function(event){window.clearInterval(zidongleft);if(panduanrightfalse){zidongrightsetInterval(function(){defaults.swipeRight()},50);}panduanrighttrue;panduanleftfalse;},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);panduanleftfalse;panduanrightfalse;defaults.swipeLeft();shiftCoord.x finalCoord.x;}else if(finalCoord.x - shiftCoord.x -5){window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleftfalse;panduanrightfalse;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);panduanleftfalse;panduanrightfalse;defaults.swipeRight();}if(changeX (defaults.threshold.x*-1)) {window.clearInterval(zidongright);window.clearInterval(zidongleft);panduanleftfalse;panduanrightfalse;defaults.swipeLeft();}}}, false); 以上的效果就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途。 原文地址http://blog.sina.com.cn/s/blog_3f1fc8950101g8rh.html 转载于:https://www.cnblogs.com/mopagunda/p/4642704.html
