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 相关文章推荐
使用JQUERY Tabs插件宿主IFRAMES
Jan 01 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
javascript模拟命名空间
Apr 17 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
jquery图片滚动放大代码分享(1)
Aug 25 Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
JS实现简单tab选项卡切换
Oct 25 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 set_error_handler()函数使用详解(示例)
2013/11/12 PHP
destoon复制新模块的方法
2014/06/21 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
Smarty模板语法详解
2019/07/20 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
使用python实现rsa算法代码
2016/02/17 Python
简单易懂的python环境安装教程
2017/07/13 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python如何将两个txt文件内容合并
2019/10/18 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python使用Pandas读写Excel实例解析
2019/11/19 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
python和c语言哪个更适合初学者
2020/06/22 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
工作决心书范文
2014/03/11 职场文书
党务公开方案
2014/05/06 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
走进科学观后感
2015/06/18 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python