您当前位于：
项目开发经验 ——> 移动端案例实战 模拟手机联系人触摸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()返回给定坐标处所在的元素。是个在目前而言，兼容性不错的一种方法，具体代码如下：
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5学堂 - H5course - http://www.h5course.com</title>
-
<meta name="viewport" content="width=device-width,user-scalable=no">
-
<link rel="stylesheet" href="css/reset.css">
-
<style>
-
body {
-
font-size: 24px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap">
-
<ul id="list">
-
<li>HTML5学堂</li>
-
<li>移动端开发</li>
-
<li>模拟手机联系人导航</li>
-
<li>a~z的拖拽</li>
-
<li>touchmove的问题</li>
-
<li>使用elementFromPoint实现兼容</li>
-
</ul>
-
</div>
-
<div id="con"></div>
-
<script src="js/zepto.js"></script>
-
<script>
-
var con = document.getElementById('con');
-
var list = document.getElementById('list');
-
list.addEventListener('touchmove', function(e){
-
var x = e.touches[0].pageX;
-
var y = e.touches[0].pageY;
-
var target = document.elementFromPoint(x, y);
-
con.innerHTML = target.innerHTML;
-
}, false);
-
</script>
-
</body>
-
</html>
最后解释一下基本原理：在手指一动的时候，获取到手指的位置，之后根据位置获取当前的目标元素。之后进行相应操作即可。
欢迎沟通交流~HTML5学堂
阅读：1465
极客编程技术分享
