メニューバーの切り替え

6434 ワード

HTMLコードCSSは省略しています。

        
    
            
  • 
                    
            
    • 
            
  • 
                    
            
    • 
            
  • 
                    
            
    •

JSコードJquery利用mousetern mouseout時間イベント依頼

$( () => {
$(() => {
    //    
    let sub = $('#sub');
    //      
    let activeRow;
    //      
    let activeMenu;
    //      
    let timer;

    //                 li                      ，                 

    //                

    let mouseTrack = []

    //            document 

    mouseHandler = (e) => {

        mouseTrack.push({

            x: e.pageX,
            y: e.pageY
        })

        //                    
        if (mouseTrack.length > 3) {

            mouseTrack.shift();
        }

    }


    $('#test')
        .on("mouseenter", () => {

            sub.removeClass('none');

            $(document).bind("mousemove", mouseHandler)
        })
        .on("mouseleave", () => {

            sub.addClass('none');

            //          

            $(document).unbind("mousemove", mouseHandler);
        })
        //     
        .on('mouseenter', 'li', (e) => {

            //       li    li menu                     

            if (timer) {

                clearTimeout(timer);
            }

            //        
            if (!activeRow) {

                activeRow = $(e.target).addClass('active');

                activeMenu = $("#" + activeRow.data("id"));

                activeMenu.removeClass("none");
            }

            let currenMouse = mouseTrack[2];
            //         
            let leftCorner = mouseTrack[1];

            let delay = needDealy(sub,leftCorner,currenMouse) ;
            //               
            if(delay) {

                timer = setTimeout(() => {
    
                    //         li
                    activeRow.removeClass('active');
    
                    activeMenu.addClass('none');
    
                    //         li
    
                    activeRow = $(e.target);
    
                    activeMenu = $("#" + activeRow.data("id"));
    
                    activeRow.addClass("active");
    
                    activeMenu.removeClass("none");
    
                    timer = null;
                }, 300);
            }else{

                var perActiveRow = activeRow;

                var perActiveMenu = activeMenu;

                activeRow = $(e.target);

                activeMenu = $('#' + activeRow.data('id'));

                perActiveRow.removeClass('active');

                perActiveMenu.addClass('none');

                activeRow.addClass('active');

                activeMenu.removeClass('none')
            }



        });

    //                  li   menu                                                        0

    //          
    //   2         
    function vector(a, b) {

        return {
            x: a.x - b.x,
            y: a.y - b.y
        }
    }
    //     
    function vectorProduct(a, b) {

        return a.x * b.y - a.y * b.x;
    }

    //          

    function isPositionInAngle(p, a, b, c) {

        let pa = vector(p, a);
        let pb = vector(p, b);
        let pc = vector(p, c);

        let t1 = vectorProduct(pa, pb);
        let t2 = vectorProduct(pa, pc);
        let t3 = vectorProduct(pb, pc);

        return t1 * t2 * t3 > 0;
        //     0        
    }

    //              li       

    // ele    leftCorner          currenMouse      
    function needDealy(ele, leftCorner, currenMouse) {

        //      
        let offset = ele.offset();
        //         
        let topLeft = {

            x: offset.left,
            y: offset.top
        }
        //            
        let bottomLeft = {

            x: offset.left,
            y: offset.top + ele.height
        }


        return isPositionInAngle(currenMouse,leftCorner,topLeft,bottomLeft) ;
    }

})

これで完璧なメニューバーの遅延のない切り替えができます.インテリジェントポイントイベント依頼ユーザ行動の事前判断
jqueryオブジェクトの同世代のすべての要素を選択
css設定が一定画素を超えるとスクロールバーが表示されます