jQuery实现滑动字母进行检索特效效果

jQuery实现滑动字母进行检索特效效果

一款jQuery实现类似苹果通讯录列表首字母检索功能;

使用方法
需要用到的JS代码文件

1
2
<script src="js/jquery.min.js"></script>
<script src="js/resize.js" type="text/javascript" charset="utf-8"></script>

关键代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var domH = $(".term_nav li").height();
var domY,moveY,index,item_top;
$(".term_nav").on({
       touchstart: function (e) {
           startY = e.originalEvent.targetTouches[0].pageY;
       },
       touchmove: function (e) {  
         e.preventDefault();          
           $("body").on({
               touchmove: function (e) {
                   e.preventDefault();
               }
           });
           domY = $(this).offset().top;
           moveY = e.originalEvent.targetTouches[0].pageY;
index = parseInt((moveY-domY)/domH);
$(".term_nav li").eq(index).addClass("on").siblings().removeClass("on");
       
item_top=$('.term_box').eq(index).offset().top-100;
$(window).scrollTop(item_top);
       },
       touchend: function () {
         $("body").off("touchmove")
       }
});
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论