Javascript实现滑块滑动改变值的实现代码


Posted in Javascript onApril 12, 2013

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

本人也是,但是本人比较喜欢自己动手来实现。废话不多说。上图:
实现结果:
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操作去改变相应的组件渲染
备注:
由于公司网络不是很理想。回家之后会把所有源码上传
Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 #Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 #Javascript
深入理解JavaScript 闭包究竟是什么
Apr 12 #Javascript
关于JavaScript中string 的replace
Apr 12 #Javascript
关于JavaScript与HTML的交互事件
Apr 12 #Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 #Javascript
js实现单一html页面两套css切换代码
Apr 11 #Javascript
You might like
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
小程序实现tab标签页
2020/11/16 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
用Python实现随机森林算法的示例
2017/08/24 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python实现IOU计算案例
2020/04/12 Python
Unix控制后台进程都有哪些进程
2016/09/22 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
商务英语专业求职信范文
2014/01/28 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
村创先争优活动总结
2014/08/28 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
民政局未婚证明
2015/06/15 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server