直播平臺開發,伸縮式選單,隨意調整選單欄橫向的大小
直播平臺開發,伸縮式選單,隨意調整選單欄橫向的大小實現的相關程式碼
/*拖拽區div樣式*/ .resize { cursor: col-resize; position: relative; // top: 45%; top: 400px; background-color: #d6d6d6; border-radius: 5px; margin-top: -10px; width: 10px; height: 50px; background-size: cover; background-position: center; font-size: 32px; color: white; } /*拖拽區滑鼠懸停樣式*/ .resize:hover { color: #444444; } //左側選單設定百分比寬度,方便拖拽自適應 .main_menu { width:22%; /*右側初始化寬度*/ height: 100%; background: #BF334E!important; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.11); }
methods裡面的拖拽函式:
// 拖拽事件 dragControllerDiv() { var resize = document.getElementsByClassName('resize') var left = document.getElementsByClassName('left') var mid = document.getElementsByClassName('mid') var box = document.getElementsByClassName('box') for (let i = 0; i < resize.length; i++) { // 滑鼠按下事件 resize[i].onmousedown = function (e) { //顏色改變提醒 resize[i].style.background = '#818181' var startX = e.clientX resize[i].left = resize[i].offsetLeft // 滑鼠拖動事件 document.onmousemove = function (e) { console.log('滑鼠按下') var endX = e.clientX var moveLen = resize[i].left + (endX - startX - 270) // (endx-startx)=移動的距離。resize[i].left+移動的距離=左邊區域最後的寬度 var maxT = box[i].clientWidth - resize[i].offsetWidth - 270// 容器寬度 - 左邊區域的寬度 = 右邊區域的寬度 console.log(moveLen,maxT) if (moveLen < 32) moveLen = 270 // 左邊區域的最小寬度為32px if (moveLen > maxT - 150) moveLen = maxT - 650 //右邊區域最小寬度為150px resize[i].style.left = moveLen // 設定左側區域的寬度 for (let j = 0; j < left.length; j++) { console.log( left[j].style) left[j].style.width = moveLen + 'px' mid[j].style.width = box[i].clientWidth - moveLen - 10 + 'px' } } // 滑鼠鬆開事件 document.onmouseup = function (evt) { console.log('滑鼠收起') //顏色恢復 resize[i].style.background = '#d6d6d6' document.onmousemove = null document.onmouseup = null resize[i].releaseCapture && resize[i].releaseCapture() //當你不在需要繼續獲得滑鼠訊息就要應該呼叫ReleaseCapture()釋放掉 } resize[i].setCapture && resize[i].setCapture() //該函式在屬於當前執行緒的指定視窗裡設定滑鼠捕獲 return false } } },
mounted裡面呼叫:
mounted() { this.dragControllerDiv() }, suoh's Blog
以上就是直播平臺開發,伸縮式選單,隨意調整選單欄橫向的大小實現的相關程式碼, 更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2855755/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 直播平臺原始碼,可摺疊式選單欄原始碼
- DcatAdmin選單樣式調整
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- CSS 可伸縮圓角導航選單CSS
- 如何用CSS製作橫向選單?CSS
- js頂部可以伸縮的導航選單效果JS
- 直播原始碼網站,點選分類調起選單欄並彈出原始碼網站
- CSS3橫向導航選單效果CSSS3
- JavaScript橫向二級導航選單效果JavaScript
- 滑鼠懸浮可以上下伸縮的導航選單
- 垂直可伸縮的導航選單例項程式碼單例
- 水平伸縮動畫導航選單實現詳解動畫
- 滑鼠右鍵選單欄東西太多怎麼辦 右鍵選單怎麼編輯調整
- 直播電商平臺開發,常用基礎控制元件-單選(複選)按鈕-圖片檢視控制元件
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- 微信公眾平臺開發(八) 自定義選單功能開發
- 直播app開發,滑動式的頂部導航欄(左右橫向滑動)APP
- 影片直播原始碼,預設展開側邊欄選單原始碼
- 工具欄選單
- wx選單欄
- 選單欄[MenuStrip]
- Vue之網易雲音樂橫向選單的實現Vue
- css3實現的可伸縮圓角導航選單CSSS3
- css實現立體效果橫向導航選單CSS
- Silverlight中利用Blend繪製可伸縮的Tab選單
- win10 工作列選單字型大小怎麼調_win10選單字型大小怎麼設定Win10
- CSS製作橫向導航選單例項程式碼CSS單例
- 在PyQt中構建 Python 選單欄、選單和工具欄QTPython
- NeuChar 平臺使用及開發教程(三):使用 NeuChar 的選單服務
- 直播電商平臺開發,橫豎屏切換的方法
- win10如何調整開始欄大小_win10開始欄怎麼調整Win10
- 8.PHP微信公眾平臺開發 自定義選單功能PHP
- 線上直播原始碼,開發一個下拉選單元件原始碼元件
- 滑鼠懸浮中英文切換橫向導航選單
- win10調整右鍵選單寬度的方法Win10
- Bartender 4: 讓你的 Mac 選單欄更整潔更高效Mac
- EXTjs 伸縮選單佈局accordion 和嚮導佈局cardlayoutJS
- UIWebView自定義選單欄UIWebView