限制滑塊的頂部和底部
[英]Limit top and bottom of a slider
問題描述
我正在研究一個簡單的滑塊，但我面臨着讓它在達到極限時停止的麻煩。
所以基本上，我希望杠桿元素停止在頂部和底部位置，即使用戶試圖超過它。
我想避免使用純 JS 和/或 ECMA 代碼以外的任何東西。
這是我的小項目：
s_Title.innerHTML = "mySlider"; dragSlider(document.getElementById("mySlider")); var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2); var minPos = document.getElementById("s_Groove").offsetTop + document.getElementById("s_Groove").offsetHeight + (s_Lever.offsetHeight/2); // Initialize SP value document.getElementById("s_SP").innerHTML = s_Lever.offsetTop; function dragSlider() { let start_Pos = 0; let final_Pos = 0; document.getElementById("s_Lever").onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: start_Pos = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { document.getElementById("s_SP").innerHTML = e.clientY; e = e || window.event; e.preventDefault(); // calculate the new cursor position: final_Pos = start_Pos - e.clientY; start_Pos = e.clientY; // set the element's new position: s_Lever.style.top = (s_Lever.offsetTop - final_Pos) + "px"; if(s_Lever.style.top <= maxPos) { s_Lever.style.top = maxPos; } else if(s_Lever.style.top >= minPos) { s_Lever.style.top = minPos; } } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }
body{ position: absolute; left: 0px; top: 0px; border: 0px; margin: 0px; padding: 0px; background-color: #C0C0C0; } #mySlider{ position: absolute; left: 50px; top: 50px; width: 100px; height: 500px; border: 2px solid black; border-left: 2px solid white; border-top: 2px solid white; border-radius: 10px; margin: 0px; padding: 0px; background-color: #C0C0C0; } #s_Title{ position: absolute; left: 0px; left: 0px; top: 0px; width: 100px; height: 40px; border-Bottom: 2px solid black; margin: 0px; padding: 0px; background-color:transparent; font-family: Arial; font-size: 16px; text-align: center; line-height: 40px; } #s_Groove{ position: absolute; left: 40px; top: 60px; width: 16px; height: 376px; border: 2px solid black; border-right: 2px solid white; border-bottom:2px solid white; margin: 0px; padding: 0px; background-color: #B0B0B0; } #s_Lever{ position: absolute; left: 20px; top: 428px; width: 56px; height: 20px; border: 2px solid black; border-left: 2px solid white; border-top:2px solid white; margin: 0px; padding: 0px; background-color: #00FF0088; } #s_SP{ position: absolute; left: 0px; top: 458px; width: 100px; height: 40px; border-top: 2px solid black; margin: 0px; padding: 0px; background-color: transparent; font-family: Arial; font-size: 16px; text-align: center; line-height: 40px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="mySlider" content="Example of a slider"> <meta name="keywords" content="slider"> <meta name="author" content="JV, Andrade"> <meta name="viewport" contetn="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="mySlider"> <div id="s_Title"></div> <div id="s_Groove"></div> <div id="s_Lever"></div> <div id="s_SP"></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
2 個解決方案
解決方案1
2 2020-11-05 08:27:33
你錯了：
if (s_Lever.style.top <= maxPos)...
s_Lever.style.top是一個字符串（帶有“px”）， maxPos是一個數字。 您需要更正它，並將“px”添加到 if 命令中的指定樣式頂部
解決方案2
1 已采納 2020-11-05 08:36:58
像這樣嘗試：
s_Title.innerHTML = "mySlider"; dragSlider(document.getElementById("mySlider")); var maxPos = document.getElementById("s_Groove").offsetTop - (s_Lever.offsetHeight/2); var minPos = document.getElementById("s_Groove").offsetTop + document.getElementById("s_Groove").offsetHeight - (s_Lever.offsetHeight/2); // Initialize SP value document.getElementById("s_SP").innerHTML = s_Lever.offsetTop; function dragSlider() { let start_Pos = 0; let final_Pos = 0; document.getElementById("s_Lever").onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: start_Pos = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { let new_Pos = 0; document.getElementById("s_SP").innerHTML = e.clientY; e = e || window.event; e.preventDefault(); // calculate the new cursor position: final_Pos = start_Pos - e.clientY; start_Pos = e.clientY; new_Pos = s_Lever.offsetTop - final_Pos // set the element's new position: if(new_Pos <= maxPos) { s_Lever.style.top = maxPos + "px"; } else if(new_Pos >= minPos) { s_Lever.style.top = minPos + "px"; } else { s_Lever.style.top = new_Pos + "px"; } } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }
body{ position: absolute; left: 0px; top: 0px; border: 0px; margin: 0px; padding: 0px; background-color: #C0C0C0; } #mySlider{ position: absolute; left: 50px; top: 50px; width: 100px; height: 500px; border: 2px solid black; border-left: 2px solid white; border-top: 2px solid white; border-radius: 10px; margin: 0px; padding: 0px; background-color: #C0C0C0; } #s_Title{ position: absolute; left: 0px; left: 0px; top: 0px; width: 100px; height: 40px; border-Bottom: 2px solid black; margin: 0px; padding: 0px; background-color:transparent; font-family: Arial; font-size: 16px; text-align: center; line-height: 40px; } #s_Groove{ position: absolute; left: 40px; top: 60px; width: 16px; height: 376px; border: 2px solid black; border-right: 2px solid white; border-bottom:2px solid white; margin: 0px; padding: 0px; background-color: #B0B0B0; } #s_Lever{ position: absolute; left: 20px; top: 428px; width: 56px; height: 20px; border: 2px solid black; border-left: 2px solid white; border-top:2px solid white; margin: 0px; padding: 0px; background-color: #00FF0088; } #s_SP{ position: absolute; left: 0px; top: 458px; width: 100px; height: 40px; border-top: 2px solid black; margin: 0px; padding: 0px; background-color: transparent; font-family: Arial; font-size: 16px; text-align: center; line-height: 40px; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="mySlider" content="Example of a slider"> <meta name="keywords" content="slider"> <meta name="author" content="JV, Andrade"> <meta name="viewport" contetn="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="mySlider"> <div id="s_Title"></div> <div id="s_Groove"></div> <div id="s_Lever"></div> <div id="s_SP"></div> </div> <script type="text/javascript" src="script.js"></script> </body> </html>
需要進行一些調整：
-
maxPos的定義 - 需要使用數字而不是字符串的比較邏輯
- 應用
maxPos，還需要包括單位
是否可以更改 swiper 滑塊中的方向垂直滑塊？ 我想要從上到下和從下到上的選項？
[英]Is it possible to change the direction vertical slider in swiper slider? I want to have both top to bottom and bottom to top option?
$ .noUiSlider垂直滑塊，最大值位於頂部，最小值位於底部
[英]$.noUiSlider vertical slider with max value at top and min value at bottom
有沒有辦法讓jQuery UI滑塊從0開始而不是從底部開始？
[英]Is there a way to make the jQuery UI slider start with 0 on top instead of on bottom?
元素滑塊從0開始到底部（負）而不是在Firefox中從0到頂部
[英]element slider start from 0 to bottom (negative) instead 0 to top in firefox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.