功能示意圖

菜單自適應示意圖如下：

對象A可以拖動，縮放。菜單跟隨對象A拖動，位置優先級為下面、上面、右邊、左邊、中間。

實現思路

其實菜單放在上下左右中，都是它的left和top在變，我們只要依次計算菜單在下/上/右/左/中時的left和top，以及在這個left和top下，菜單的左\右\上\下邊界有沒有超出屏幕即可。

實現代碼

這段代碼依賴于具體環境，是實際工程中拷下來的一段代碼：

export default class ToolsBar{/*** 初始化*/init(){this.width = em2px(13.75); //一級菜單寬度this.height = em2px(2.75); //一級菜菜單高度this.offsetLeft = em2px(10.083335); //左邊超出寬度this.offsetRight = em2px(1.833335); //右邊超出寬度this.offsetHeight = em2px(5.166665); //二級菜單的高度}/*** 設置位置* @param rect 立體圖形的平面矩形框 {left, top, width, height}*/adjustPosition(rect){let maxWidth = $(document).width();let maxHeight = $(document).height();//left ,top 都是指一級菜單的left和toplet left = rect.left + (rect.width-this.width)/2;let top = rect.top + rect.height;left = left < this.offsetLeft ? this.offsetLeft:left;left = (left + this.width + this.offsetRight ) > maxWidth ? maxWidth - this.width - this.offsetRight:left;//下面放不下，放上面let bottomCanPlace = (top + this.height + this.offsetHeight ) < maxHeight ;top = bottomCanPlace ? top : rect.top - this.height;// 上面放不了，放右邊let topCanPlace = bottomCanPlace || ( top > this.offsetHeight );top = topCanPlace ? top : rect.top + rect.height/2;left = topCanPlace ? left : rect.left + rect.width + this.offsetLeft;//右邊放不了，放左邊let rightCanPlace = topCanPlace || ( left + this.width + this.offsetRight < maxWidth );left = rightCanPlace ? left : rect.left - this.offsetRight - this.width;//左邊放不了，放中間let leftCanPlace = rightCanPlace || ( left - this.offsetLeft > 0 );left = leftCanPlace ? left : maxWidth/2;top = leftCanPlace ? top : maxHeight/2;this.view.css({left:left,top:top});//在頂部時，二級菜單向上展開if( !bottomCanPlace && topCanPlace ){this.subItemList.addClass("subItemUp");}else{this.subItemList.removeClass("subItemUp");}}}

總結

以上是生活随笔為你收集整理的js菜单自适应的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。