移动端 模拟手机联系人触摸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学堂(h5course-com)

原文发表时间:2016-01-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

C语言中的循环语句练习

1566
来自专栏C/C++基础

STL四种智能指针

STL一共给我们提供了四种智能指针:auto_ptr、unique_ptr、shared_ptr和weak_ptr,auto_ptr是C++98提供的解决方案,...

552
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

3956
来自专栏HTML5学堂

一步步教你弹性框架-下篇

HTML5学堂:本文继续为大家讲解弹性框架,在前两篇文章当中,我们从最基本的来回运动,讲解到缓冲运动、有摩擦力的运动。基本实现了弹性动画效果。今天我们主要来进行...

3654
来自专栏cnblogs

论JavaScript的作用域

     一直以来本人认为想深入了解一门语言,不光是让自己变成撸sir,更需要时间的锤炼。能经得起时间考验的东西更值得拥有。学习和使用Javascript一晃都...

18710
来自专栏python3

python3--对象之间的交互,类命名空间与对象、实例的命令空间

现在有个游戏人与狗,人定义一个类,狗定义一个类,如何让两个类之间互相交互起来,让这个游戏变得更加有意思,代码如下

871
来自专栏coding for love

CSS入门11-定位与覆盖

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

732
来自专栏数据和云

【性能优化】一个执行计划异常变更的案例(上)

作者简介: ? 刘晨,网名bisal,Oracle 10g/11g OCM,并国内首批Oracle YEP成员, 博客:blog.itpub.net/bisal...

25710
来自专栏木子昭的博客

用面向对象的方法写"敲门砖"

一道名为"敲门砖"的面试题: 用面向对象的方法写,点击列表内,子元素的子标签, 来删除子元素 ? 考点: 递归(删除标签, 需要找到列表的直属子标签, 需要通...

3183
来自专栏极客编程

solidity智能合约

Solidity里的智能合约是面向对象语言里的类。它们持久存放在状态变量和函数中,(在里面)可以通过solidity修改这些变量。在不同的智能合约(实例)中调用...

803

扫描关注云+社区