jQuery实现滑动字母进行检索特效效果
文字广告 1年前
0 203 1
一款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") } }); |
演示地址:
当前内容只有登录了才能查看,如果您已经注册,请登录。