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


Posted in Javascript onFebruary 18, 2017

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

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

思路:监听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实现做通讯录的索引滑动显示效果和滑动显示锚点效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
JqGrid web打印实现代码
May 31 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
JS实现纸牌发牌动画
Jan 19 Javascript
angular ng-repeat数组中的数组实例
Feb 18 #Javascript
js Canvas绘制圆形时钟效果
Feb 17 #Javascript
Bootstrap风格的zTree右键菜单
Feb 17 #Javascript
js仿新浪微博消息发布功能
Feb 17 #Javascript
babel基本使用详解
Feb 17 #Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 #Javascript
canvas 实现中国象棋
Feb 17 #Javascript
You might like
使用Apache的rewrite技术
2006/06/22 PHP
phpwind中的数据库操作类
2007/01/02 PHP
php下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP绕过open_basedir限制操作文件的方法
2018/06/10 PHP
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
2011/04/27 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
2013/11/15 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
使用jquery解析XML的方法
2014/09/05 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Python科学计算之Pandas详解
2017/01/15 Python
python查询mysql,返回json的实例
2018/03/26 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python样条插值的实现代码
2018/12/17 Python
学习和使用python的13个理由
2019/07/30 Python
python路径的写法及目录的获取方式
2019/12/26 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
初任培训自我鉴定
2013/10/07 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
违纪检讨书2000字
2014/02/08 职场文书
离职保密承诺书
2014/05/28 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
报案材料怎么写
2015/05/25 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
python用tkinter开发的扫雷游戏
2021/06/01 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL