I recently made a tax-related function, and it’s worth mentioning the slider implementation on this page. Everyone knows that most programmers in reality are not very familiar with pages and art.
Me too, but I prefer to do it myself. No more nonsense. Above:
Result of implementation:
Part of js code:
window.onload = function ()
{
var oWin = document.getElementById("win");
var bDrag = false;
var disX = disY = 0;
oWin.onmousedown = function (event)
{
var event = event || window.event;
bDrag = true;
disX = event.clientX - oWin.offsetLeft;
this.setCapture && this.setCapture();
return false
};
oWin.onmousemove = function (event)
{
if (!bDrag) return;
var event = event || window.event;
var iL = event.clientX - disX;
var maxL = 480;
iL = iL < 0 ? 0 : iL;
iL = iL > maxL ? maxL : iL;
oWin.style.marginTop = oWin.style.marginLeft = 0;
oWin.style.left = iL "px"; // The position of the slider from the left
document.getElementById("hkline").style.width = iL; //The width of the green item on the left of the slider
return false
};
document.onmouseup = window.onblur = oWin.onlosecapture = function ()
{
bDrag = false;
oWin.releaseCapture && oWin.releaseCapture();
};
};
Instructions:
1. Onmousedown and onmousemove are mainly used to record the position after dragging. Then use dom operations to change the corresponding component rendering
Remarks:
Because the company network is not very ideal. I will upload all the source code when I get home