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操作去改变相应的组件渲染
备注：
由于公司网络不是很理想。回家之后会把所有源码上传
相关文章
本文包含本地发布npm包发布流程, 和 github action自动发布npm包流程,帮助你更好的发布自己或公司的npm包,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
当用户勾选显示明文复选框时，要以明文显示用户输入的密码，去掉勾选时要变回密文，问题是ie8中是不允许修改input的type属性2014-09-09
有些小伙伴可能会问caller,callee 是什么?在javascript 中有什么样的作用?那么本篇会对于此做一些基本介绍。希望能够对大家理解javascript中的callee与caller有所帮助。2015-08-08
这篇文章主要介绍了如何理解JavaScript中的对象，帮助大家更好的学习JavaScript，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了让JavaScript代码更加精简的方法技巧,文章通过使用 JavaScript对象解构来节省代码，JavaScript 对象解构赋值在项目开发中是一个常用的技能。下文实现过程需要的小伙伴可以参考一下2022-06-06
这篇文章主要为大家详细介绍了JS调用安卓手机摄像头扫描二维码，并用JS解析二维码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了javascript中的糖衣语法Promise对象详解,Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,这篇文章主要给大家介绍了关于JavaScript原型与原型链的相关资料,需要的朋友可以参考下2021-10-10
浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等，这些在js中时完全可以实现的，本文搜集整理了一些，感兴趣的朋友可以参考下2013-10-10
这篇文章主要为大家详细介绍了BootStrap modal实现拖拽功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
最新评论