Jquery实现弹性滑块滑动选择数值插件


Posted in Javascript onAugust 08, 2015

做了一个类似于阿里云弹性计算中的滑块效果,可以自由滑动滑块,并且计算刻度。基于jQuery实现,小伙伴们不要忘记载入jquery哦

CSS

.main {
 margin: 0 auto;
 margin-top: 100px;
 width: 500px;
 font-family: 微软雅黑;
 -webkit-user-select: none;
}
.contain {
 width: 500px;
 height: 40px;
 background-color: #E8E8E8;
}
.track {
 width: 16px;
 height: 46px;
 position: absolute;
 margin: -3px 0 0 0px;
 background-color: #2dacd1;
 cursor: pointer;
}
.valueC {
 height: 40px;
 position: absolute;
 margin: 0;
 background-color: #43BFE3;
}
.value span {
 position: absolute;
 text-align: right;
 height: 40px;
 line-height: 40px;
 color: #808080;
 border-right: 1px solid #dddddd;
}
.show {
 width: 45px;
 height: 30px;
 background-color: #333;
 color: #fff;
 text-align: center;
 line-height: 30px;
 position: absolute;
 opacity: 0.9;
 margin-top: -38px;
 margin-left: -15px;
}

HTML

<div class="main">
 <div class="contain">
  <div class="show">0</div>
  <div class="valueC"></div>
  <div class="value"> </div>
  <div class="track"></div>
 </div>
</div>

JS

<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript"> 
$(function(){ScrollerTrack.Init();});
var ScrollerTrack={
 BodyWidth:500,
 MaxValue:300,
 CurrentX:0,
 CurrentValue:0,
 Count:0,
 Init:function(){
 var mWidth=ScrollerTrack.BodyWidth;
 $(".contain").css("width",mWidth+"px");
 var count=ScrollerTrack.MaxValue/50;
 ScrollerTrack.Count=count;
 var itemWidth=mWidth/count;
 for(var i=0;i<count;i++){
  var span=$("<span>"+(i+1)*50+"</span>");
  $(span).css("width",itemWidth+"px").css("margin-left",i*itemWidth+"px");
  $(".value").append(span);
 }
 ScrollerTrack.Value();
 },
 Value:function(){
  var currentValue;
  var isMoving=false;
  ScrollerTrack.CurrentX=$(".track").offset().left;
  $(".track").mousedown(function() {
  var target=$(this).parent();
  isMoving=true;
  $("html,body").mousemove(function(event) {
   if(isMoving==false)return;
   var changeX = event.clientX - ScrollerTrack.CurrentX;
         currentValue = changeX - ScrollerTrack.CurrentX;
   if(changeX<=0){
   $(target).find(".track").css("margin-left", "0px");
   $(target).find(".valueC").css("width", "0px");
   $(target).find(".show").css("margin-left", "-15px");
   $(target).find(".show").html(0);
   ScrollerTrack.CurrentValue=0;
   }
   else if(changeX>=ScrollerTrack.BodyWidth-16){
   $(target).find(".track").css("margin-left", ScrollerTrack.BodyWidth-16+"px");
   $(target).find(".valueC").css("width",ScrollerTrack.BodyWidth-16+"px");
   $(target).find(".show").css("margin-left", ScrollerTrack.BodyWidth-31+"px");
   $(target).find(".show").html(ScrollerTrack.MaxValue);
   ScrollerTrack.CurrentValue=ScrollerTrack.MaxValue;
   }
   else{
   $(target).find(".track").css("margin-left", changeX+"px");
   $(target).find(".valueC").css("width", changeX+"px");
   $(target).find(".show").css("margin-left", changeX-15+"px");
   var v=ScrollerTrack.MaxValue*((changeX+16)/ScrollerTrack.BodyWidth);
   $(target).find(".show").html(parseInt(v));
   ScrollerTrack.CurrentValue=parseInt(v);
   }
  });
  });
  $("html,body").mouseup(function() {
  isMoving=false;
  });
 }
}
</script>

演示图:

Jquery实现弹性滑块滑动选择数值插件

演示地址:http://demo.3water.com/js/2015/jquery-txhk/

另外推荐一款范围选择器插件jRange,它是基于jQuery的一款简单插件。下面我们来看下插件jRange的使用。

HTML
首先载入jQuery库文件以及jRange相关的css文件:jquery.range.css和插件:jquery.range.js
 

<script src="jquery.js"></script> 
<link rel="stylesheet" href="jquery.range.css"> 
<script src="jquery.range.js"></script>

然后在需要展示滑块选择器的位置放入以下代码:
 

<input type="hidden" class="slider-input" value="23" />

我们使用了hiiden类型的文本域,设置默认值value,如23。

jQuery

调用jRange插件非常简单,直接用下面的代码:

$('.single-slider').jRange({ 
  from: 0, 
  to: 100, 
  step: 1, 
  scale: [0,25,50,75,100], 
  format: '%s', 
  width: 300, 
  showLabels: true, 
  showScale: true 
});

更多信息请参阅jRange项目官网:https://github.com/nitinhayaran/jRange

Javascript 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 #Javascript
jQuery实现下拉框选择图片功能实例
Aug 08 #Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 #Javascript
jQuery实现的Div窗口震动效果实例
Aug 07 #Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 #Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 #Javascript
jQuery基于ajax实现星星评论代码
Aug 07 #Javascript
You might like
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
Laravel 5 学习笔记
2015/03/06 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
你真的了解Python的random模块吗?
2017/12/12 Python
单链表反转python实现代码示例
2018/02/08 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
python实现网页自动签到功能
2019/01/21 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Python里面如何实现tuple和list的转换
2012/06/13 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
cf搞笑广告词
2014/03/14 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
委托证明范本
2014/11/25 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript