Javascript实现滑块滑动改变值的实现代码
更新时间：2013年04月12日 15:08:42 作者：
一个关于税务的功能，值得一说的是本页面的滑块实现由于对美工不是很熟悉所以上图了，感兴趣的朋友可以了解下哈
最近做了一个关于税务的功能，值得一说的是本页面的滑块实现。大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉。
本人也是，但是本人比较喜欢自己动手来实现。废话不多说。上图：
实现结果:
部分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操作去改变相应的组件渲染
备注：
由于公司网络不是很理想。回家之后会把所有源码上传
本人也是，但是本人比较喜欢自己动手来实现。废话不多说。上图：
实现结果:
部分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操作去改变相应的组件渲染
备注：
由于公司网络不是很理想。回家之后会把所有源码上传
相关文章
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍接口，举例说明什么是接口，对接口进行详细剖析，感兴趣的小伙伴们可以参考一下2015-11-11
删除属性有很多方法,学到了就在这里记录一下,下面这篇文章主要给大家介绍了关于js删除对象属性的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
nodejs最近好红火，我也趁寒冷天气在nodejs的火炉边取暖一下。缩址还原实现代码。2010-12-12
JavaScript在控件上添加倒计时功能，主要原理是利用控件的setEnable(true)/setEnable(false)来进行设置控件的可用与不可用状态，实现过程非常简单，需要的的朋友参考下吧2017-07-07
大多数语言都提供了按位运算符,恰当的使用按位运算符有时候会取得的很好的效果,下面这篇文章主要给大家介绍了关于JS中位运算符的一些妙用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要为大家详细介绍了原生js实现无缝轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了js设计模式之代理模式及订阅发布模式,结合实例形式详细分析了代理模式及订阅发布模式的概念、原理、实现方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
这篇文章主要介绍了基于Taro的微信小程序模板消息-获取formId功能模块封装实践，小程序提供了一种能力-模板消息，基于微信的通知渠道，我们为开发者提供了可以高效触达用户的模板消息能力，以便实现服务的闭环并提供更佳的体验,需要的朋友可以参考下2019-07-07
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
这篇文章主要介绍了JavaScript Ajax Json实现上下级下拉框联动效果实例代码，有需要的朋友可以参考一下2013-11-11
今天小编就为大家分享一篇layui的table中显示图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论