jQuery手机移动端触屏滑动TAB标签特效代码

92建站   2021-11-10   收藏本文

这套jQuery手机移动端触屏滑动TAB标签特效代码,完美实现手指滑动屏幕切换选项卡的功能,默认是传统样式,可以通过修改CSS3代码改为自适应的,小编的了很多此类资源,认为这套代码在滑动效果上相当不错,很多手机站都会用到这个功能。

使用方法:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/touchslider.js"></script>
<script type="text/javascript">
$(".find_nav_list").css("left",0);

$(".find_nav_list li").each(function(){
        $(".sideline").css({left:0});
        $(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
});
var nav_w=$(".find_nav_list li").first().width();
$(".sideline").width(nav_w);
$(".find_nav_list li").on('click', function(){
    nav_w=$(this).width();
    $(".sideline").stop(true);
    $(".sideline").animate({left:$(this).position().left},300);
    $(".sideline").animate({width:nav_w});
    $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
    var fn_w = ($(".find_nav").width() - nav_w) / 2;
    var fnl_l;
    var fnl_x = parseInt($(this).position().left);
    if (fnl_x <= fn_w) {
        fnl_l = 0;
    } else if (fn_w - fnl_x <= flb_w - fl_w) {
        fnl_l = flb_w - fl_w;
    } else {
        fnl_l = fn_w - fnl_x;
    }
    $(".find_nav_list").animate({
        "left" : fnl_l
    }, 300);
    
});
……
……
​​​​​​​……
</script >

效果截图:

触屏特效代码,滑动特效代码,TAB标签代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开