前端鼠标移入悬浮框针对页面顶部和底部的定位设置

一般情况对于鼠标移入出现悬浮框,会考虑到是在页面顶部还是底部,所以会涉及到一些代码

<div v-show="i.secStationList&&(i.secStationList.length > 0)" class="more" onmouseenter="onMouseHover(event, 'siteName', 1)" onmouseleave="onMouseHover(event, 'siteName', 2)">
                      <em>【更多】</em>
                      <div class="dropDown scroll">
                        <div class="scroll detailList">
                          <p v-for="(item,index) in i.secStationList" :key="index" :title="item">{{item}}</p>
                        </div>
                      </div>
                    </div>
.siteNames .dropDown {
    position: absolute;
    top: 35px;
    left: 0;
    background-color: #fff;
    z-index: 123456;
    box-shadow: 0 0 15px #aaa;
    width: 100%;
    /*display: block;*/
    display: none;
    cursor: inherit;
    line-height: 30px;
    max-height: 150px;
    /* height: 150px; */
    overflow: hidden;
}
.siteNames .dropDown .detailList {
    width: 100%;
    /* height: 150px; */
    max-height: 150px;
    overflow: hidden;
}
function onMouseHover(e, i, c) { 
  var _this = $(e.currentTarget);
  var height = $('#app').height();
  //var thisWidth = _this.width();
  //var x = e.clientX,
    y = e.clientY;
  if (i == 'siteName') {
    if (c == 1) {//鼠标移入
      var len = _this.find('.dropDown p').length;
      console.log(height)
      console.log(y+(len*30))
//30px为悬浮框中各行的行高,40为页面app的padding值
      if (y + (len * 30) > height - 40) {
        len = len > 5 ? 5 : len;
        _this.find('.dropDown').css('top', -len * 30 + 'px').stop().fadeIn(300);
      } else {
//35px为鼠标移入行的行高
        _this.find('.dropDown').css('top', '35px').stop().fadeIn(300);
      }
      _this.parents('li').css('overflow', 'initial');
      if (len > 5) {
        initNiceScroll();
        setNiceScroll();
      }
    } else {//鼠标移出
      $(e.currentTarget).find('.dropDown').fadeOut(300)

    }
  }
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值