Javascript implementation code for sliding the slider to change the value

Source: Internet
Author: User

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:Copy codeThe Code is as follows: 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 ();
};
};

Description:
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.