用户资料选项卡

最近在项目中用到了一个类似于微博的用户资料选项卡的功能,其实就是计算8个位置的坐标点

var screenW = $(window).width(),

  screenH = $(window).height(),

  domL = dom.offset().left,

  domT = dom.offset().top,

  domW = dom.outerWidth(),

  domH = dom.outerHeight(),

  usercardW = $("#usercard").outerWidth(),

  usercardH = $("#usercard").outerHeight(),

  scrollL = document.documentElement.scrollLeft || document.body.scrollLeft || 0,

  scrollT = document.documentElement.scrollTop|| document.body.scrollTop || 0;

if(domL + scrollL < (screenW - 1000)/2 + 200){

  if(screenH /2 < domT - scrollT){

     return {top: domT + domH - usercardH + 'px', left : domL + domW + 'px'}

  }else{

     return {top: domT + 'px', left : domL + domW + 'px'}

  }

}else if(domL + scrollL > screenW/2 + 200){

    if(screenH /2 < domT - scrollT){

     return {top: domT + domH - usercardH + 'px', left : domL - usercardW + 'px' }

  }else{

    return {top: domT + 'px', left : domL - usercardW + 'px'}

  }

}else{

   if(screenH /2 < domT - scrollT){

    if(domL + scrollL < screenW/2){

       return {top: domT - usercardH + 'px', left : domL + 'px'}

    }else{

       return {top: domT - usercardH + 'px', left : domL + domW - usercardW + 'px'}

    }

  }else{

     if(domL + scrollL < screenW/2){

      return {top: domT + domH + 'px', left : domL + 'px'}

    }else{

      return {top: domT + domH + 'px', left : domL + domW - usercardW + 'px'

    }

  }

}

原文地址:https://www.cnblogs.com/xiaohui108/p/2313463.html