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中的View-Model使用介绍
Aug 11 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
javascript真的不难-回顾一下基础知识
Jan 15 Javascript
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
vue element-ui table表格滚动加载方法
Mar 02 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
简单了解JS打开url的方法
Feb 21 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实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
python查找第k小元素代码分享
2013/12/18 Python
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python探索之实现一个简单的HTTP服务器
2017/10/28 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
个人自我评价和职业目标
2014/01/24 职场文书
社区庆中秋节活动方案
2014/02/07 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
批评与自我批评总结
2014/10/17 职场文书
预备党员自我评价范文
2015/03/04 职场文书
代理词怎么写
2015/05/25 职场文书
微信早安问候语
2015/11/10 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
Spring中的@Transactional的工作原理
2022/06/05 Java/Android
Django框架模板用法详解
2022/06/10 Python