为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

人到中年有点甜 2021-09-30 15:15:14
$(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;                });            }        }    }); });那么,有什么解决办法吗?
查看完整描述

1 回答

  • 1 回答
  • 0 关注
  • 183 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号