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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 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 file_get_contents设置超时处理方法
2013/09/30 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
php数组指针操作详解
2017/02/14 PHP
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python编写检测数据库SA用户的方法
2014/07/11 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技