移动端 模拟手机联系人触摸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 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

前端文章收藏

961
来自专栏小筱月

分享一次纯 css 瀑布流 和 js 瀑布流

现在百度图片,360 图片搜索,都是以一种瀑布流的形式展示,那么接下来,分享一波纯 css 瀑布流 和 js 瀑布流

1584
来自专栏带你撸出一手好代码

px转vw和vh的工具(对前端同学有用)

CSS3中有两个新尺寸单位vw和vh, 这两个单位非常适合于开发移动端自适应页面。 假如说有一个设计师做了一张1136x750px的页面,这长页面是针对iPho...

4678
来自专栏前端说吧

css3-巧用选择器 “:target”

3426
来自专栏守候书阁

CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)

在自己的专栏上写了十几篇文章了,都是与js有关的。暂时还没有写过关于css3的文章。css3,给我的感觉就是,不难,但是很难玩转自如。今天,就用css3来实现三...

2614
来自专栏一个会写诗的程序员的博客

React 学习笔记 1 React 是什么实例JSX 语法React.Component

A declarative, efficient, and flexible JavaScript library for building user inte...

802
来自专栏GreenLeaves

CSS-DOM介绍

三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1、结构层: 结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些...

1808
来自专栏前端知识分享

第54天:原生js实现轮播图效果

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

2271
来自专栏Android开发实战

Android自定义View系列 (从小白做起) 二: 相知

上一章节中,主要介绍了三个主要成分 1.LayoutInflater.inflate()的参数及其用法 2.四种构造函数的说明,以及使用的地方 3.工具Pain...

803
来自专栏袁佳平的专栏

周杰伦读心术背后的技术实现

前言   在技术细节的内容开始之前,您可以先通过下方的二维码再次体验这个魔术。 image.png image.png 一、HTML 1.设置meta <m...

5338

扫码关注云+社区