移动端仿购物网站可滑动导航栏（适用于移动端）

浏览：983次- 评论：1次- 发布时间：2018-04-20

Html

Css

$(document).ready(function() {
    offserHeight = $(window).width();
    Liheight = offserHeight / 5;
    var Dwidth = offserHeight + Liheight * 4;
    $(".friendlj div").css({
        'width': Dwidth + 'px'
    });
    $(".friendlj div ul").css({
        'width': offserHeight + 'px'
    });
    $(".friendlj div ul").css({
        'margin-left': -offserHeight / 2 + 'px'
    });
    $(".friendlj div ul li").css("width", Liheight + 'px');
    $(".bjk").css({
        'width': Liheight + 'px',
        'margin-left': -Liheight / 2 + 'px'
    });
    Uleft = $(".friendlj div ul").offset().left;
    // console.log(Uleft);
    timer = setInterval(TimeChangeD, 1000);
    $(".Taxis ul li").click(function() {
        clearInterval(timer);
        var Nval = $(this).attr('index');
        var ChangeLI = Liheight * (Nval - 1);
        $(".friendlj").stop().animate({
            scrollLeft: ChangeLI + 'px'
        }, 1000);
        $("#showCot" + Nval).show().siblings().hide();
    });
    $(".friendlj div ul").on("touchmove", function(e) {
        clearInterval(timer);
        $(".friendlj").attr("pdrun", "1");
        $(".friendlj").scroll(function() {
            if ($(".friendlj").attr("pdrun")) {
                var scrollLeftValue = $(".friendlj").scrollLeft();
                // console.log(scrollLeftValue);
                var pdLigs = Math.ceil(scrollLeftValue / Liheight);
                // console.log(pdLigs);
                $(".friendlj").stop().animate({
                    scrollLeft: pdLigs * Liheight + 'px'
                }, 500);
                var nowpdLigs = pdLigs + 1;
                $("#showCot" + nowpdLigs).show().siblings().hide();
            }
            $(".friendlj").removeAttr('pdrun');
        })
    })
})

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3