jq子导航溢出部分css3点击位移 居中

子导航溢出部分css3点击位移

原理是通过点击后判断index然后得出位移数

$(".menu-dj li").click(function() {
    var s=$('.menu-dj').width();//当前导航的宽度
    var b=$(this).width();//当前li的宽度
    var size=$(".menu-dj li").size();//li个数
    var index=$(this).index();//当前点击的li
    var allw=b*size;//总宽度
    var weiyi=b*(index-1);//需要位移的宽度
    if(b*size>s && index>0 && (weiyi+s)<allw){//判断是否溢出和是否最后部分
      $(".menu-dj").transform("translate3d(" + -weiyi + "px, 0px, 0px)") 
    }
})


然后css部分!

ul{

 display: box;              /* OLD - Android 4.4- */

    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

    display: -moz-box;   

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

}

li{

 -webkit-flex-shrink: 0;

    -moz-flex-shrink: 0;

    -ms-flex-shrink: 0;

    -webkit-flex-shrink: 0;

    flex-shrink: 0;


}

li固定宽度或者padding都行! 


写的好!

微信扫一扫赏大洋