这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 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 实现做通讯录的索引滑动显示效果和滑动显示锚点效果就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0604/327522.html