JavaScript自定義滾動條詳解
分享一段程式碼例項,它實現了自定義滾動條效果。
下面就分享一下此程式碼,並詳細介紹一下它的實現過程。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #parent { width: 600px; height: 20px; background-color: #ccc; position: relative; } #antzone { width: 20px; height: 20px; background-color: red; position: absolute; top: 0; left: 0px; } #div2 { width: 0; height: 0; background-color: green; } </style> <script type="text/javascript"> window.onload = function() { var oDiv1 = document.getElementById("antzone"); var oDiv = document.getElementById("parent"); var oDiv2 = document.getElementById('div2'); var tarX = 0; oDiv1.onmousedown = function(ev) { var oEvent = ev || event; tarX = oEvent.clientX - oDiv1.offsetLeft; document.onmousemove = function(ev) { var oEvent = ev || event; var l = oEvent.clientX - tarX; if (l < 0) { l = 0; } if (l > (oDiv.offsetWidth - oDiv1.offsetWidth)) { l = oDiv.offsetWidth - oDiv1.offsetWidth; } oDiv1.style.left = l + 'px'; var scale = l / (oDiv.offsetWidth - oDiv1.offsetWidth) document.title = scale; oDiv2.style.width = 400 * scale + 'px'; oDiv2.style.height = 400 * scale + 'px'; } oDiv1.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; } } } </script> </head> <body> <div id="parent"> <div id="antzone"></div> </div> <div id="div2"></div> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload = function() {},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var oDiv1 = document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
(3).var oDiv = document.getElementById("parent"),獲取id屬性值為parent的元素物件。
(4).var oDiv2 = document.getElementById('div2'),獲取id屬性值為div2的元素物件。
(5).var tarX = 0,宣告一個變數並賦值為0。
(6).oDiv1.onmousedown = function(ev) {},紅色的元素物件註冊onmousedown事件處理函式。
(7).var oEvent = ev || event,實現事件物件的相容性處理。
(8).tarX = oEvent.clientX - oDiv1.offsetLeft,獲取當前滑鼠指標在客戶區橫向座標與紅色元素距離父元素距離的差。
(9).document.onmousemove = function(ev) {},註冊onmousemove事件處理函式,之所以註冊在document元素之上,是利用事件冒泡規則,防止滑鼠指標滑出的現象。
(10).var oEvent = ev || event,實現事件物件的相容性處理。
(11).var l = oEvent.clientX - tarX,獲取紅色元素距離父元素左側的距離。
(12). if (l < 0) {
l = 0;
},如果防止紅色元素拖出父元素的左邊框。
(13).if (l > (oDiv.offsetWidth - oDiv1.offsetWidth)) {
l = oDiv.offsetWidth - oDiv1.offsetWidth;
},和上面同樣的道理,防止拖出父元素的有邊框。
(14).oDiv1.style.left = l + 'px',設定紅色元素的left屬性值。
(15).var scale = l / (oDiv.offsetWidth - oDiv1.offsetWidth),獲取拖動完成的比例。
(16).document.title = scale,設定網頁title屬性值為上面獲取的比例。
(17).oDiv2.style.width = 400 * scale + 'px',獲取odiv2元素的寬度。
(18).oDiv2.style.height = 400 * scale + 'px',獲取odiv2元素的高度。
(19).oDiv1.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
},取消事件處理函式的註冊。
二.相關閱讀:
(1).onmousedown事件參閱JavaScript mousedown事件一章節。
(2).事件物件相容參閱var ev=window.event||ev的作用是什麼一章節。
(3).clientX參閱JavaScript event.clientX一章節。
(4).offsetLeft參閱JavaScript offsetleft一章節。
(5).onmousemove參閱JavaScript mousemove事件一章節。
(6).offsetWidth參閱JavaScript offsetWidth一章節。
(7).onmouseup參閱JavaScript mouseup事件一章節。
相關文章
- 【Flutter實戰】自定義滾動條Flutter
- 前端頁面自定義滾動條前端
- Vue.js 桌面端自定義滾動條元件|vue美化滾動條VScrollVue.js元件
- vue2.x自定義虛擬滾動條|vue美化滾動條元件VscrollVue元件
- Vue 返回記住滾動條位置詳解Vue
- scroll-view元件bindscroll例項應用:自定義滾動條View元件
- 短視訊平臺搭建,自定義滾動條的樣式
- vue 自定義指令實現,滾動條百分比進度條。Vue
- JavaScript 滾動條定位指定位置JavaScript
- JavaScript圖片橫向無縫滾動詳解JavaScript
- JavaScript 動態進度條效果詳解JavaScript
- 小程式自定義音訊元件,帶滾動條,IOS迴圈失效問題音訊元件iOS
- 基於svelte3自定義虛擬滾動條元件svelte3-scrollbar元件
- 使用 selenium (python),無法在頁面的 iframe 框架中實現對貌似是自定義滾動條進行滾動Python框架
- Vue的自定義滾動,我用el-scrollbarVue
- div滾動條樣式,水平滾動
- 隱藏滾動條保留滾動效果
- 三叉戟之橫向自定義滾動
- 直播軟體原始碼,自定義RecyclerView支援快速滾動原始碼View
- JavaScript自定義事件JavaScript事件
- [C#] (原創)一步一步教你自定義控制元件——02,ScrollBar(滾動條)C#控制元件
- android 自定義酷炫進度條動畫Android動畫
- 【Android】自定義ProgressView-進度條動畫AndroidView動畫
- 安卓Property Animator動畫詳解(二)-自定義屬性安卓動畫
- css隱藏滾動條並可以滾動CSS
- CSS滾動條美化CSS
- 支援橫向、豎向無限滾動和自定義指示器的廣告條BannerView和淘寶頭條效果View
- 移動端div跟隨滾動條滾動(自制
- Javascript中自定義事件JavaScript事件
- jQuery新聞列表垂直滾動詳解jQuery
- 解決集合檢視的header遮住滾動條Header
- tbody 滾動條設定
- 表格顯示滾動條
- css隱藏滾動條CSS
- Bootstrap列表新增滾動條boot
- 專案需求討論-自定義滾輪
- Android 自定義View 滑動解鎖AndroidView
- 基於 RecyclerView 實現的歌詞滾動自定義控制元件View控制元件