Javascript实现滑块滑动改变值的实现代码
更新时间：2013年04月12日 15:08:42 投稿：whsnow
一个功能,值得一说的是本页面的滑块实现由于对美工不是很熟悉所以上图了,感兴趣的朋友可以了解下哈
最近做了一个功能，值得一说的是本页面的滑块实现。大家都知道现实中的程序员大部分都是对于页面和美工不是很熟悉。
本人也是，但是本人比较喜欢自己动手来实现。废话不多说。上图：
实现结果:
部分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仿淘宝页面图片滚动加载及刷新回顶部的方法解析
这篇文章主要介绍了JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析,包括懒加载和onbeforeunload等要点的理解,需要的朋友可以参考下2016-05-05
模拟弹出窗口效果，关闭层之前，不能选择后面的页内容...2007-02-02
Layui Table js 模拟选中checkbox的例子
今天小编就为大家分享一篇Layui Table js 模拟选中checkbox的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JavaScript实现返回顶部按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文主要对Javascript的外部对象进行介绍，列举了具体实例。便于理解。有需要的朋友可以看下2016-12-12
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
小编使用bootstrap做的下拉菜单在电脑浏览器中可以正常使用，在手机浏览器中能弹出下拉列表却不能选择列表中的菜单项，怎么回事，如何解决呢？下面小编给大家分享下具体原因及解决办法，一起看下吧2016-07-07
这篇文章主要为大家详细介绍了微信小程序用户信息encryptedData的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
本文主要介绍了webpack之基础打包优化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下<BR>2022-02-02
JavaScript中的splice主要用来对js中的数组进行操作，包括删除，添加，替换等。这篇文章主要介绍了JavaScript中的splice方法用法详解的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript中的类数组对象介绍,一个对象并不是由Array构造函数所创建的,它依然呈现出数组的行为,在这种情况下,这些对象被称为“类数组对象”,需要的朋友可以参考下2014-12-12
最新评论