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 相关文章推荐
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 Javascript
javascript中style.left和offsetLeft的用法说明
Mar 07 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
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的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php上传excel表格并获取数据
2017/04/27 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
python回调函数用法实例分析
2015/05/09 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
python 基于opencv实现图像增强
2020/12/23 Python
python源文件的字符编码知识点详解
2021/03/04 Python
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
指针和引用有什么区别
2013/01/13 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
关于人生的感言
2014/01/17 职场文书
高校教师自荐信范文
2014/03/13 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
工作保证书范文
2014/04/29 职场文书
实习护士自荐信
2014/06/21 职场文书
加强作风建设工作总结
2014/10/23 职场文书