HTML5学堂-码匠 HTML5学堂

您当前位于:项目开发经验积累 ——> 移动端案例实战 模拟手机联系人触摸A~Z导航的高级效果

移动端案例实战 模拟手机联系人触摸A~Z导航的高级效果

2015/08/27 22:24:25 | 作者:HTML5学堂(码匠) | 分类:项目开发经验积累 | 关键词:移动端,手机联系人,模拟,字母导航

移动端 项目经验 模拟手机联系人触摸a~z导航

HTML5学堂:今天要与大家分享一个当前移动端很常见的效果,类似于手机联系人的快速导航功能,即当触摸a~z的字母时,能够相对应的显示文字。有些手机的音乐导航也类似,具体可详见下图:

类似手机联系人的导航效果

touchmove的问题

在移动端,我们可以使用touch事件进行处理,此处首先想到的是使用touchmove事件。本身touchmove事件是会随着手指不断接触屏幕而不断被触发,而在事件的知识当中,我们有事件委托以及事件目标对象e.target的技术,因此,基本的实现思路就成了:将touchmove事件绑定在字母元素的父级身上(即使用事件委托),之后进行实时的目标检测(即检测e.target),然后根据目标的不同实现左侧内容的位置变化。

想法是好的,但是在实际的操作中发现,虽然touchmove会触发多次,但是并不能够实时获取e.target(事件目标对象),这也就使得上面的这种思路成了空想。

实现触摸a~z导航(模拟手机联系人)

当前能够想到的实现方法有两种(也均测试无误)

第一种方法:手指滑动的时候,判断手指滑动的竖向位置,如果到达相应标签的位置(由于标签是fixed定位模式,因此可以拿到每个标签[A、B]的高度值),则进行左边内容的控制。

第二种方法比第一种会更方便,也是我这里介绍的一种方法,利用elementFromPoint。elementFromPoint()返回给定坐标处所在的元素。是个在目前而言,兼容性不错的一种方法,具体代码如下:

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5学堂 - H5course - http://www.h5course.com</title>
  6.     <meta name="viewport" content="width=device-width,user-scalable=no">
  7.     <link rel="stylesheet" href="css/reset.css">
  8.     <style>
  9.         body {
  10.             font-size: 24px;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="wrap">
  16.         <ul id="list">
  17.             <li>HTML5学堂</li>
  18.             <li>移动端开发</li>
  19.             <li>模拟手机联系人导航</li>
  20.             <li>a~z的拖拽</li>
  21.             <li>touchmove的问题</li>
  22.             <li>使用elementFromPoint实现兼容</li>
  23.         </ul>
  24.     </div>
  25.     <div id="con"></div>
  26.     <script src="js/zepto.js"></script>
  27.     <script>
  28.         var con = document.getElementById('con');
  29.         var list = document.getElementById('list');
  30.         list.addEventListener('touchmove', function(e){
  31.             var x = e.touches[0].pageX;
  32.     var y = e.touches[0].pageY;
  33.             var target = document.elementFromPoint(x, y);
  34.             con.innerHTML = target.innerHTML;
  35.         }, false);
  36.     </script>
  37. </body>
  38. </html>

最后解释一下基本原理:在手指一动的时候,获取到手指的位置,之后根据位置获取当前的目标元素。之后进行相应操作即可。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端