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 相关文章推荐
JavaScript表单常用验证集合
Jan 16 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python 操作MySQL详解及实例
2017/04/30 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python3 mmh3安装及使用方法
2019/10/09 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
金融专业个人求职信
2013/09/22 职场文书
玩具公司的创业计划书
2013/12/31 职场文书
高三家长寄语
2014/04/03 职场文书
2014年部门工作总结
2014/11/12 职场文书
师德师风学习材料
2014/12/19 职场文书
佛光寺导游词
2015/02/10 职场文书
复试通知单模板
2015/04/24 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis
python实现双向链表原理
2022/05/25 Python