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 相关文章推荐
Mootools 1.2教程 正则表达式
Sep 15 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
微信小程序实现时间预约功能
Nov 27 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 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查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
2018/05/12 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python做反被爬保护的方法
2019/07/01 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
python初步实现word2vec操作
2020/06/09 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
实现strstr功能,即在父串中寻找子串首次出现的位置
2016/08/05 面试题
联片教研活动总结
2014/07/01 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
教师节主持词开场白
2015/05/29 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
nginx共享内存的机制详解
2022/03/21 Servers