如果鼠标进入特定区域,则在 mousemove 上隐藏元素

$(document).ready(function() {

  var mx, my, anime = false;

  var e_top = $('.panel-dock').css('top').split('px')[0]

  var e_bottom = $('.panel-dock').css('height').split('px')[0]


  e_top = parseFloat(e_top)

  e_bottom = parseFloat(e_bottom)


  $(document).mousemove(function(e) {

    if (anime) {

      return;

    }

    mx = parseFloat(e.clientX);

    my = parseFloat(e.clientY);


    console.log(my, e_top, e_bottom)



    if (mx <= 80) {

      //if (my >= e_top && my <= e_bottom) {

        anime = true;

        $('.panel-dock').animate({

          left: 0,

        }, 'fast', function() {

          anime = false;

        });

      //}

    } else if (mx > 80) {

      //if (my < e_top && my > e_bottom) {

        anime = true;

        $('.panel-dock').animate({

          left: -60,

        }, 'slow', function() {

          anime = false;

        });

      //}

    }

  });

});

当我删除条件if (my>=e_top && my<=e_bottom)和if (my<e_top && my>e_bottom). 并且,如果鼠标进入mx <= 80面板内的任何地方都是可见的;否则,它会慢慢隐藏。


如果鼠标距左侧 80 像素以内且位于面板的起始位置与其高度之间,我想显示此面板。


$(document).ready(function() {

    var mx, my, anime = false;

    var e_top = $('.panel').css('top').split('px')[0]

    var e_bottom = $('.panel').css('bottom').split('px')[0]


    $(document).mousemove(function(e) {

        if  (anime) {

            return;

        }

        mx = e.clientX;

        my = e.clientY;


        // console.log(my, e_top, e_bottom)


        if (mx<=80) {

            if (my>=e_top && my<=e_bottom) {

                anime = true;

                $('.panel').animate({

                    left: '0',

                }, 'fast', function () {

                    anime = false;

                });

            }

        } else if (mx > 80) {

            if (my<e_top && my>e_bottom) {

                anime = true;

                $('.panel').animate({

                    left: '-60',

                }, 'slow', function () {

                    anime = false;

                });

            }

        }

    }); 

});

那么,有什么解决办法吗?


人到中年有点甜
浏览 186回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript