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);
}
});
好了，结束。
以上这篇js实现做通讯录的索引滑动显示效果和滑动显示锚点效果就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
本文向大家介绍js实现移动端导航点击自动滑动效果，包括了js实现移动端导航点击自动滑动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现移动端导航点击滑动效果的具体代码，供大家参考，具体内容如下 移动端模拟导航可点击自动滑动 0.1.4。 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】。 废话不多说直接上代码： 截图： 提供demo
-
本文向大家介绍JavaScript实现滑动门效果，包括了JavaScript实现滑动门效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码，供大家参考，具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢？下面简单分享一下方法, 二、实现滑
-
本文向大家介绍IOS实现点击滑动抽屉效果，包括了IOS实现点击滑动抽屉效果的使用技巧和注意事项，需要的朋友参考一下 最近，看到好多Android上的抽屉效果，也忍不住想要自己写一个。在Android里面可以用SlidingDrawer，很方便的实现。IOS上面就只有自己写了。其实原理很简单就是 UIView 的移动，和一些手势的操作。 效果图： 以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍Android实现仿通讯录侧边栏滑动SiderBar效果代码，包括了Android实现仿通讯录侧边栏滑动SiderBar效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android实现仿通讯录侧边栏滑动SiderBar效果代码。分享给大家供大家参考，具体如下： 之前看到某些应用的侧边栏做得不错，想想自己也弄一个出来，现在分享出来，当然里面还有不足的地方，请大家多多包
-
本文向大家介绍jq实现左侧显示图片右侧文字滑动切换效果，包括了jq实现左侧显示图片右侧文字滑动切换效果的使用技巧和注意事项，需要的朋友参考一下 分享一款jQuery左侧图片右侧文字滑动切换代码。这是一款基于jQuery实现的列表图片控制图片滑动切换代码。效果图如下： 下面给大家分享下基于jq实现左侧显示图片右侧文字滑动切换效果，用div+css布置表单借用jq实现特效，具体不多说了，请看下面代码。
-
问题内容： 我正在尝试使用React创建滑动事件。我不想使用任何外部组件或jquery。 CSS是这样的： 在react组件中，我正在尝试执行以下操作： 如何识别滑动事件？ 如果在我的示例中而不是添加它，它可以工作，但是如何制作滑动效果？ 这是jsfiddle。 问题答案： 您可以将事件处理程序添加到您的React组件中： 您可能还想为鼠标事件添加事件处理程序，以实现跨平台兼容性： 您有正确的想法