JS响应鼠标点击实现两个滑块区间拖动效果


Posted in Javascript onOctober 26, 2015

本文实例讲述了JS实现的两个滑块区间拖动效果代码。分享给大家供大家参考,具体如下:

网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围。

运行效果截图如下:

JS响应鼠标点击实现两个滑块区间拖动效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> js双滑块区间</title>
<style type='text/css'>
#range{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#fff;border:1px inset #9C9B97}
#meaBox{position:absolute;width:148px;height:4px;background:#ccc;top:-2px;border:1px inset #9C9B97;border-left:0;border-right:0;}
.mea{position:absolute;top:-5px;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;}
#mea_l{left:0;}
#mea_r{right:0;border-top:13px solid #ff0000;}
</style>
</head>
<body>
<div id='range'>
 <div id='meaBox' onmousedown="change(this,event)"> </div>
 <div id='mea_l' class='mea' onmousedown="change(this,event)" ></div>
 <div id='mea_r' class='mea' onmousedown="change(this,event)" ></div>
</div>
<script type='text/javascript'>
var $id=function(o){return document.getElementById(o) || o;}
var change=function(o,e){
 var e = e ? e : window.event;
 if(!window.event) {e.preventDefault();}
 var init={
 mX: o.offsetLeft,
 lX: $id('mea_l').offsetLeft,
 rX: $id('mea_r').offsetLeft,
 dX: e.clientX
 };
 document.onmousemove=function(e){
 var e = e ? e : window.event;
 var dist=e.clientX-init.dX,
  len=init.mX + dist,
  l_x=init.lX,
  r_x=init.rX;
 switch (o.id){
  case 'mea_l':
  l_x=init.lX + dist;
  move();
  break;
  case 'mea_r':
  r_x=init.rX + dist;
  move();
  break;
  case 'meaBox':
  l_x=init.lX + dist;
  r_x=init.rX + dist;
  move2();
  break;
  default: break;
 }
 function move(){
  if(r_x > l_x + 20 && len>=0 && len<=140 ) {
  o.style.left=len+"px";
  $id('meaBox').style.left= l_x + 'px';
  $id('meaBox').style.width=r_x - l_x + 'px';
  }
 };
 function move2(){
  if(l_x>=0 && r_x <=140 ) {
  o.style.left=len+"px";
  $id('mea_l').style.left= l_x + "px";
  $id('mea_r').style.left= r_x +"px";
  }
 };
 }
 document.onmouseup=function(){
 document.onmousemove=null;
 document.onmouseup=null;
 }
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
前端性能优化及技巧
May 06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
angular.bind使用心得
Oct 26 #Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 #Javascript
You might like
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
解析vue中的$mount
2017/12/21 Javascript
Node.js静态服务器的实现方法
2018/02/28 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
理解python中生成器用法
2017/12/20 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
python模块如何查看
2020/06/16 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
车贷收入证明范本
2014/01/09 职场文书
理财投资建议书
2014/03/12 职场文书
学校安全防火方案
2014/06/07 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2014年工程师工作总结
2014/11/25 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
通知的格式范文
2015/04/27 职场文书
大学生入党群众意见书
2015/06/02 职场文书
创业计划书详解
2019/07/19 职场文书