js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
作者:jingxian 发布时间:2024-04-16 09:23:00
标签:js,通讯录,索引,滑动,锚点
只做实现。。完全没考虑性能优化。所以我实现了以后特别卡。
第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上。
思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可。
这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知。可以去试下。
index为索引div的id
$("#index").get(0).addEventListener('touchmove',function(event){
var a = document.elementFromPoint(event.touches[0].clientX,event.touches[0].clientY).parentNode;
a.click();
});
第二个我是想在页面滑动到某个字母的位置时显示闪一下这个字母。
思路:监听scroll事件,同样利用elementFromPoint获取你想要的位置的对应元素,然后执行显示效果即可。
ps: 使用的是weui
$(window).scroll(function(){
var a = document.elementFromPoint(0,0);
if($(a).hasClass("weui_cells_title"))
{
$(".weui_toast_content_my").html($(a).attr("name"));
$("#toast").show(0);
$("#toast").slideUp(300);
}
});
0
投稿
猜你喜欢
- window.onresize = baiduResizeDiv; window.onerror = function(){} var di
- 要随机生成字符串代码如下:在MySQL中定义一个随机串的方法,然后再SQL语句中调用此方法。随机串函数定义方法:CREATE DEFINER
- Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点:1、比Jquery轻量,但处理请求不多的时候,可以使用2、基于Prom
- 这篇文章主要介绍了如何使用python传入不确定个数参数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 玩过knockoutjs的都知道,有一个强大的功能叫做component,而这个component有个牛逼的地方就是拥有自己的viewmod
- 前言:我们写Python基本不需要自己创建抽象基类,而是通过鸭子类型来解决大部分问题。《流畅的Python》作者使用了15年Python,但
- 前言在开始本文之前,先来介绍一下相关内容,大家都知道一些防护SSRF漏洞的代码一般使用正则来判断访问IP是否为内部IP,比如下面这段网上比较
- 微信小程序可滑动月日历组件此日历可进行左右滑动,展示签到打卡信息,和大家分享一下。如果样式变形,请检查是否有共用样式起冲突展示一下效果图在c
- 1.直方图# -*-coding:utf-8 -*-# @Time : 21:02# @Author: 黄荣津# @File :
- 本文实例讲述了Python selenium的基本使用方法。分享给大家供大家参考,具体如下:selenium是一个web自动化测试工具,se
- 当需要存储很多同类型的不通过数据时可能需要使用到嵌套,先用一个例子说明嵌套的使用1、在列表中存储字典#假设年级里有一群国际化的学生,有黄皮肤
- 用面向对象的思维解决问题的重点当遇到一个需求的时候不用自己去实现,如果自己一步步实现那就是面向过程;应该找一个专门做这个事的人来做。面向对象
- 场景:把一个时间字符串转成Date,存进Mysql。时间天数会比实际时间少1天,也可能是小时少了13-14小时Mysql的时区是CST(使用
- 概述从今天开始我们将开启一段自然语言处理 (NLP) 的旅程. 自然语言处理可以让来处理, 理解, 以及运用人类的语言, 实现机器语言和人类
- 本文实例为大家分享了python实现txt文件格式转换为arff格式的具体代码,供大家参考,具体内容如下将文件读取出来的时候默认都是字符型的
- 并发是一个很酷的话题,一旦你掌握了它,就会成为一笔巨大的财富。说实话,我一开始很害怕写这篇文章,因为我自己直到最近才对并发性不太适应。我已经
- 本文用python写了一个会员管理系统,供大家参考,具体内容如下:"""后台管理员前台会员信息系统1.后台管理
- 学习目的 学会SQL中的占位符用法 在鲸鱼这几天忙死了,好几天没写了,真对不起各位。这几天让XHTML闹得不开心,虽然以前也知道这个,但没太
- 初学python ,研究了几天,写了一个python 调用 有道api接口程序效果看下图:申明:代码仅供和我一样的初学者学习交流有道api申
- USE [数据库名称]; --1.定义需要查找的关键字。在搜索中,使用模糊搜索:LIKE '%@key_find%'