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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
JS上传图片前的限制包括(jpg jpg gif及大小高宽)等
Dec 19 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
ExpressJS入门实例
Jan 14 Javascript
详解javascript高级定时器
Dec 31 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
建立动态的WML站点(二)
2006/10/09 PHP
队列在编程中的实际应用(php)
2010/09/04 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Javascript实现异步编程的过程
2018/06/18 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
Python 抓取动态网页内容方案详解
2014/12/25 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python玩转Excel的读写改实例
2019/02/22 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
幼儿园开学寄语
2014/04/03 职场文书
城管大队整治方案
2014/05/06 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
初中教师个人工作总结
2015/02/10 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL