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获取scrollHeight问题想到的标准问题
May 27 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
2016/06/01 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
Python中super的用法实例
2015/05/28 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
浅析Python四种数据类型
2018/09/26 Python
在python里面运用多继承方法详解
2019/07/01 Python
python3实现微型的web服务器
2019/09/03 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
如何定义TensorFlow输入节点
2020/01/23 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
什么是Smart Navigation?
2016/07/03 面试题
面向对象设计的原则是什么
2013/02/13 面试题
安全生产专项整治方案
2014/05/06 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
求职信标题怎么写
2014/05/26 职场文书
土地租赁意向书
2014/07/30 职场文书
你会写请假条吗?
2019/06/26 职场文书
给numpy.array增加维度的超简单方法
2021/06/02 Python
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL