部分js代码
Home > Web Front-end > JS Tutorial > Javascript implementation code to implement slider sliding to change value_javascript skills

Javascript implementation code to implement slider sliding to change value_javascript skills

WBOY
Release: 2016-05-16 17:37:21
Original
1178 people have browsed it

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:
Javascript implementation code to implement slider sliding to change value_javascript skills
Part of js code:

Copy code The 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 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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template