jQuery实现滑动字母进行检索

所属分类:UI,其他-滚动,杂项

 22630  358  查看评论 (5)
分享到微信朋友圈
X
jQuery实现滑动字母进行检索 ie兼容9

注:请在移动端查看最佳展示效果

关键代码

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")
       }
});
相关插件-滚动,杂项

双向垂直上下滚动

垂直滚动插件,可切换向上或向下方向滚动。
  滚动
 46440  374

文字轮播无缝滚动

文字轮播无缝滚动
  滚动
 72294  567

仿百度知道(滚动固定标题)插件

仿百度知道滚动固定标题,点击标题滚动到内容块
  滚动
 23502  368

jQuery双锚点自动定位

jQuery滚动自自动锚点定位
  滚动
 35488  420

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    . ?? .originally丶→.┵ 0
    2019/5/23 10:50:15
    这么写死 <h1>p </h1> <h4> PDS </h4>,
    怎么动态插入数据?? 回复
    zmr008 0
    2018/10/11 20:10:21
    66666666666666
        /n0
        2018/11/22 11:27:05
        怎么获取jq币
        uchaopin0
        2018/11/30 12:53:53
        每天签到或者充值
        追风少年李qq0
        2022/9/23 9:35:35
        可以充值jQ币或者VIP,发布资源、回答他人提问、分享插件使用方法也会奖励jQ币
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复