Recently I made a tax function. It is worth mentioning that the slider implementation on this page. Everyone knows that most programmers in reality are not very familiar with pages and art.
I am myself, but I prefer to do it myself. Not much nonsense. :
Implementation result:
Some js Code:
[Javascript]
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 left position of the slider.
Document. getElementById ("hkline"). style. width = iL; // The width of the green bar on the left of the slider
Return false
};
Document. onmouseup = window. onblur = oWin. onlosecapture = function ()
{
BDrag = false;
OWin. releaseCapture & oWin. releaseCapture ();
};
};
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 left position of the slider.
Document. getElementById ("hkline"). style. width = iL; // The width of the green bar on the left of the slider
Return false
};
Document. onmouseup = window. onblur = oWin. onlosecapture = function ()
{
BDrag = false;
OWin. releaseCapture & oWin. releaseCapture ();
};
};
Note:
1. the onmousedown and onmousemove records the position after the drag. Then, use the dom operation to change the rendering of the corresponding component.
Note:
Because the company's network is not ideal. Upload all source code