【推荐理由】赠运费险
【优惠券】20 【券后价】59.00
【下单链接】18¥ CZ0001 G5fHdEqOsnB¥
今天小结一下温州移动网站建设中涉及到的,touch的触屏事件,其包括:
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息(常用):
identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)
target:DOM元素,是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。
radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
直接上案例:
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/zepto_v1_1_6.js"></script> <script type="text/javascript"> //全局变量,触摸开始位置 var startX = 0, startY = 0; var win_w,win_h,size,zwidth,pid=0,zPid=0; var curID,prevID,nextID; var p_cx,p_cx_now,p_cy,p_cy_now,p_mar,p_move,p_marY,p_moveY; //touchstart事件 function touchSatrtFunc(evt) { try { evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; //var text = 'TouchStart事件触发:(' + x + ', ' + y + ')'; //document.getElementById("result").innerHTML = text; var b=evt.touches[0]; p_cx=b.clientX;//获取初始坐标 p_cy=b.clientY; //alert(p_cy); p_mar=parseInt($(".main").css("left"));//获得初始top值 p_marY=parseInt($(".warp").css("top"));//获得初始top值 } catch (e) { alert('touchSatrtFunc:' + e.message); } } //touchmove事件,这个事件无法获取坐标 function touchMoveFunc(evt) { try { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 var text = 'TouchMove事件触发:(' + x + ', ' + y + ')'; //判断滑动方向 if (x - startX != 0) { text += '<br/>左右滑动'; } if (y - startY != 0) { text += '<br/>上下滑动'; } document.getElementById("result").innerHTML = text; evt.preventDefault();//锁定系统活动 var b=evt.touches[0]; p_cx_now=b.clientX;//获取活动纵坐标 p_cy_now=b.clientY; //alert(p_cy_now); p_move=p_cx_now-p_cx;//计算移动距离 p_moveY=p_cy_now-p_cy; $(".main").css({"left":p_mar+p_move}); $(".warp").css({"top":p_marY+p_moveY}); } catch (e) { alert('touchMoveFunc:' + e.message); } } //touchend事件 function touchEndFunc(evt) { try { evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动 var text = 'TouchEnd事件触发'; //document.getElementById("result").innerHTML = text; //----------------------------------------------------------------横向---滑动距离大于五分之一是开始 if(p_move>win_w/5) { //向右移动 pid=pid-1; if(pid<0) { pid=size-1;//最多上翻到第一页 } } else if(p_move<-win_w/5) { //向左移动 pid=pid+1; if(pid>size-1) { pid=0; //最多下翻到最后一页 } } else { pid=pid;//不翻页 } $(".main").animate({"left":-win_w*pid},100); p_move=0;//重置移动距离 //alert(p_moveY); //--------------------------------------------------纵向移动设置 if(p_moveY>win_h/3) { //向上移动 zPid=zPid-1; if(zPid<0) { zPid=zCounts-1;//最多上翻到第一页 } } else if(p_moveY<-win_h/3) { //向下移动 zPid=zPid+1; if(zPid>zCounts-1) { zPid=0; //最多下翻到最后一页 } } else { zPid=zPid;//不翻页 } //$(".warp #"+curID).fadeOut("slow"); $(".warp").animate({"margin-top":-win_h*zPid},100); p_moveY=0;//重置移动距离 } catch (e) { alert('touchEndFunc:' + e.message); } alert(touch.identifier); } //绑定事件 function bindEvent() { win_w=$(window).width(); win_h=$(window).height(); //横向设置 curID=$(" .main li").parent(".main").parent().attr("rel"); size=$("#"+ curID +" .main li").size(); $(".prodlistDiv").css({"width":win_w,"height":win_h}); $(".main li").css({"width":win_w,"height":win_h}); zwidth=win_w*size; $(".main").css({"width":zwidth}); //纵向设置 prevID=$(" .main li").parent(".main").parent().attr("relPrev"); nextID=$(" .main li").parent(".main").parent().attr("relNext"); zCounts=$(" .prodlistDiv").size(); zheight=win_h*zCounts; $(".warp").css({"height":zheight}); document.addEventListener('touchstart', touchSatrtFunc, false); document.addEventListener('touchmove', touchMoveFunc, false); document.addEventListener('touchend', touchEndFunc, false); } //判断是否支持触摸事件 function isTouchDevice() { document.getElementById("version").innerHTML = navigator.appVersion; try { document.createEvent("TouchEvent"); //alert("支持TouchEvent事件!"); bindEvent(); //绑定事件 } catch (e) { alert("不支持TouchEvent事件!" + e.message); } } window.onload = isTouchDevice; </script> </head> <body> <div id="version"></div> <div id="result"></div> <div class="warp"> <div id="prodlist1" class="prodlistDiv" rel="prodlist1" relNext="prodlist2" relPrev="prodlist1"> <ul class="main"> <li class="prodlistLi" id="prodlistLi1" rel="prodlist1">1-1</li> <li class="prodlistLi" id="prodlistLi2" rel="prodlist1">1-2</li> <li class="prodlistLi" id="prodlistLi3" rel="prodlist1">1-3</li> <li class="prodlistLi" id="prodlistLi4" rel="prodlist1">1-4</li> </ul> </div> <div id="prodlist2" class="prodlistDiv" rel="prodlist2" relNext="prodlist3" relPrev="prodlist1"> <ul class="main"> <li class="prodlistLi" id="prodlistLi1">2-1</li> <li class="prodlistLi" id="prodlistLi2">2-2</li> <li class="prodlistLi" id="prodlistLi3">2-3</li> <li class="prodlistLi" id="prodlistLi4">2-4</li> </ul> </div> </div>
tshinet.com.css样式表:
/* CSS Document */ html,body{width:100%; height:100%; margin:0; padding:0; overflow:hidden; font-size:14px; background-color:#008c23; font-family:Helvetica,STHeiti STXihei, Microsoft JhengHei, Microsoft YaHei, Arial;} @media only screen and (max-height:479px){ body{font-size:12px;} } #version,#result{ display:none} <!--产品列表--> .warp{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative} .prodlistDiv{ width:100%; height:100%; margin:0px auto;overflow:hidden; position:relative} .prodlistDiv ul{ height:100%; position:relative} .prodlistDiv ul li{ float:left; height:100%; position:relative} #prodlist1{ background-color:#090;} #prodlist2{ background-color:red;}
以上案例经过测试可用,本文有温州网站建设友情提供!