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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
javascript Array数组对象的扩展函数代码
May 22 Javascript
JQuery优缺点分析说明
Apr 10 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 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的几个常用数字判断函数代码
2012/04/24 PHP
php添加文章时生成静态HTML文章的实现代码
2013/02/17 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
四年大学生活的个人自我评价
2013/12/11 职场文书
道德模范先进事迹
2014/02/14 职场文书
企业业务员岗位职责
2014/03/14 职场文书
应用心理学专业求职信
2014/08/04 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
人事专员岗位职责
2015/02/03 职场文书
经理岗位职责范本
2015/04/15 职场文书
2015年老干部工作总结
2015/04/23 职场文书
毕业论文致谢词
2015/05/14 职场文书