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 相关文章推荐
Webkit的跨域安全问题说明
Sep 13 Javascript
基于jquery的无限级联下拉框js插件
Oct 29 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
Mar 20 Javascript
jquery图片放大功能简单实现
Aug 01 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
vue 中swiper的使用教程
May 22 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 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
星际中的相关伤害
2020/03/04 星际争霸
php实现ping
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
jQuery 使用手册(四)
2009/09/23 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
jquery实现智能感知连接外网搜索
2013/05/21 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
详解django中自定义标签和过滤器
2017/07/03 Python
使用python实现多维数据降维操作
2020/02/24 Python
浅析Python __name__ 是什么
2020/07/07 Python
秋天的怀念教学反思
2014/04/28 职场文书
招股说明书范本
2014/05/06 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
学生会干部任命书
2015/09/21 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书