您的位置:首页 > Web前端 > JavaScript

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

2013-04-12 14:36 731 查看
最近做了一个关于税务的功能,值得一说的是本页面的滑块实现。大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉。

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



实现结果:






部分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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: