DDR爱好者之家

Javascript实现滑块滑动改变值的实现代码
站长资源 2025/1/22 佚名
33 1538
DDR爱好者之家 Design By 杰米
最近做了一个关于税务的功能，值得一说的是本页面的滑块实现。大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉。

本人也是，但是本人比较喜欢自己动手来实现。废话不多说。上图：
实现结果:
Javascript实现滑块滑动改变值的实现代码 
部分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操作去改变相应的组件渲染
备注：
由于公司网络不是很理想。回家之后会把所有源码上传
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米