Javascript实现滑块滑动改变值效果

来源：互联网发布：js 不等于多个值编辑：程序博客网时间：2024/06/04 19:19

最近做了一个关于税务的功能，值得一说的是本页面的滑块实现。大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉。

本人也是，但是本人比较喜欢自己动手来实现。废话不多说。上图：

实现结果:

部分js代码：

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";//滑块距离左边的位置  document.getElementById("hkline").style.width = iL;//滑块左边绿色条目的宽度  return false }; document.onmouseup = window.onblur = oWin.onlosecapture = function () {  bDrag = false;      oWin.releaseCapture && oWin.releaseCapture(); };};

说明：

1、主要用的onmousedown和onmousemove 记录了拖动之后的位置。然后通过dom操作去改变相应的组件渲染

源码url：

http://pan.baidu.com/share/link?shareid=454765&uk=1997312776