js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

2024-12-01 10:58:51

只做实现。。完全没考虑性能优化。所以我实现了以后特别卡。

第一个是在通讯录右边的索引条上进行滑动，滑动到相应字母就跳转到相应字母的锚点上。

思路：监听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);
  }
 });

好了，结束。

以上这篇js实现做通讯录的索引滑动显示效果和滑动显示锚点效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div
Android自定义View实现通讯录字母索引（仿微信通讯录）

一.效果:我们看到很多软件的通讯录在右侧都有一个字母索引功能,像微信,小米通讯录,QQ,还有美团选择地区等等.这里我截了一张美团选择城市的图片来看看: 我们今天就来实现图片中右侧模块的索引功能,包括触摸显示以选中的索引字母.这里我的UI界面主要是参照微信的界面来实现,所以各位也可以对照微信来看看效果,什么都不说了,只有效果图最具有说服力! 二.分析: 我们看到这样的效果我们心理都回去琢磨,他是如何实现的: 首先,它肯定是通过自定义 View 来实现的,因为 Android 没有提供类似这样的控件
js实现input框文字动态变换显示效果

本文实例讲述了js实现input框文字动态变换显示效果.分享给大家供大家参考.具体如下: 这里演示js实现INPUT框中的特殊显示效果,一些文字慢慢交替显示,最终显示出完整的文字,需要显示的文字预先保存在数组中,依次调用显示,有意思吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-txt-rand-show-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

向上滑动隐藏底部悬浮框,向下滑动显示悬浮框.使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>手机端触屏手指滑动方向</title> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0,us
原生JS实现微信通讯录

最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家.本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅. 原本微信通讯录效果: 本案例效果图: 实际工作中可以实现类似于城市列表,产品字母排序这种需求: < p>代码展示 Dom Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使
Vue+better-scroll 实现通讯录字母索引的示例代码

目录环境准备: 实现步骤: 数据结构基本HTML 使用better-scroll实现内容区列表的滚动给索引添加点击事件和移动事件实现跳转给索引添加高亮全部代码总结参考文献如图,实现一个滚动内容区域,右侧字母滚动索引定位:选择和拖动字母索引,对应内容滚动到视窗环境准备: 安装better-scroll npm包安装 mouseWheel 扩展 BetterScroll 鼠标滚轮的能力,开启鼠标滚动(移动端非必须) npm install @better-scroll/core
JS图片轮播与索引变色功能实例详解

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met
微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果: wxml:  <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&
iOS滑动解锁、滑动获取验证码效果的实现代码

最近短信服务商要求公司的app在获取短信验证码时加上校验码,目前比较流行的是采用类似滑动解锁的方式,我们公司采取的就是这种方式,设计图如下所示: 这里校验内部的处理逻辑不作介绍,主要分享一下界面效果的实现, 下面贴出代码: 先子类化UISlider #import <UIKit/UIKit.h> #define SliderWidth 240 #define SliderHeight 40 #define SliderLabelTextColor [UIColor colorWithRed:1
js实现仿微博滚动显示信息的效果

相信大家空闲的时候都会上上微博,推特等社交网站,每次我登陆微博时,我都会留意一下它有什么变化,小的有一些布局的变化,大的有API接口的改变等. 在首页登陆微博时,我们可以看到一栏"大家正在说",它滚动显示着当前每个人发送的微博:刚看到这个效果觉得挺有趣的,所以我们将在接下来的文中介绍实现滚动显示微博信息的效果. 我们细细观察了微博的"大家正在说",它是通过由上往下滚动来实现不断显示微博的,而且每一天新微博都是通过淡入效果显示的. 图1 微博"大家正在说&q

js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

相关推荐

随机推荐