• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了js索引,js索引值,js获取索引值,js获取索引,js 数组索引等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

思路:监听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();
  });
</div>

第二个我是想在页面滑动到某个字母的位置时显示闪一下这个字母。

思路:监听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);
  }
 });
</div>

好了,结束。

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

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

相关文章

  • 2017-05-11Webpack中css-loader和less-loader的使用教程
  • 2017-05-11微信小程序 textarea 组件详解及简单实例
  • 2017-05-11基于jQuery实现文字打印动态效果
  • 2017-09-05js设计模式-- 装饰着模式
  • 2017-05-11js的三种继承方式详解
  • 2017-05-11微信小程序 页面跳转及数据传递详解
  • 2017-05-11JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
  • 2017-05-11COM组件中调用JavaScript函数详解及实例
  • 2017-05-11nodejs个人博客开发第六步 数据分页
  • 2017-05-11jQuery内容筛选选择器实例代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解前端构建工具gulpjs的使用介绍及技巧
    • 关于axios返回空对象的问题解决
    • Vue form 表单提交+ajax异步请求+分页效果
    • JS跨域请求外部服务器的资源
    • vue使用watch 观察路由变化,重新获取内容
    • 微信小程序教程系列之页面跳转和参数传递(6)
    • canvas绘制的直线动画
    • Node.js与Sails redis组件的使用教程
    • Vue.js bootstrap前端实现分页和排序
    • jQuery EasyUI之验证框validatebox实例详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有