jQuery实现的数值范围range2dslider选取插件特效多款代码分享


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下:
这是是一款简单的jquery插件,使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。
运行效果图:                             -------------------查看效果 下载源码-------------------

jQuery实现的数值范围range2dslider选取插件特效多款代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现的数值范围选取特效代码如下

<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery数值范围选取插件range2dslider </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>
<style>
 body,html{
 margin:0px;
 padding:0px;
 }
 ul{
 margin:0px 0px;
 padding:10px 25px;
 }
 body>div{
 margin:0px 20px;
 padding:20px;
 background:rgba(184, 184, 184, 0.1);
 }
</style>
</head>
<body>
<div>
<h2>简单的二维滑块</h2>
<input id="slider">
<script>
window.onerror = function(msg, url, linenumber) {
 alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
 return true;
}
$('#slider').range2DSlider({
 grid:true,
 axis:[[1,2,5,7,10],[2,5,10]],
 projections:true,
 showLegend:[1,1],
 allowAxisMove:['both'],
 printLabel:function( val ){
 this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
 return val[0].toFixed(5);
 }
})
 .range2DSlider('value',[[0,1],[3,0],[6,6]]);

$('#slider')
 .range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').range2DSlider({
 template:'horizontal',
 value:[[5,0],[7,0]],
 onlyGridPoint:true,
 round:true,
 axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});
</script>
<h2>垂直滑块</h2>
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<div style="clear:both;float:none;"></div>
<script>
$('.slider2').range2DSlider({
 template:'vertical',
 value:[[0,5]],
 showRanges:[[0,1]],
 style:'float:left;margin-left:25px;',
 axis:[[0,1],[0,10]],
 round:true,
 printLabel:function( val ){
 return val[1]+' yo';
 }
});
</script>
<h2>平滑滑块(x)</h2>
<input class="slider3">
<script>
 var values = [];
 var ranges = [];
 var cities = [
 'Abuja',
 'Accra',
 'Adamstown',
 'Addis',
 'Algiers',
 'Alofi',
 'Amman',
 'Amsterdam', 
 'Andorra',
 'Ankara',
 'Antananarivo', 
 'Apia',
 'Ashgabat', 
 'Asmara',
 'Astana',
 'Asuncion', 
 'Athens',
 'Avarua',
 'Baghdad', 
 'Baku',
 'Bamako', 
 'Bandar',
 'Bangkok', 
 'Bangui',
 'Banjul',
 'Basseterre', 
 'Beijing',
 'Beirut',
 'Belgrade', 
 'Belmopan'
 ];
 for(var i = -10,k=0;i<=10;i++,k++ ){
 values.push([i,Math.sin(i),cities[i+10]]);
 if( i<10 )
 ranges.push([k,k+1]);
 } 
 $('.slider3').range2DSlider({
 x:'right',
 y:'top',
 showLegend:[0,0],
 showRanges:ranges,
 axis:[[-10,10],[-1.5,1.5]],
 allowAxisMove:['y'],
 printLabel:function( val ){
 return val[1].toFixed(2)+'<br>'+val[2];
 }
 }).range2DSlider('value',values);
</script>
<h2>自定义风格滑块</h2>
<input id="slider4">
<style>
 .xdsoft_custom .xdsoft_range2dslider_runner{
 border-radius:1px;
 margin:0px 0px -4px -8px !important;
 background:rgba(0,0,127,0.5);
 border:1px outset #ddd;
 }
 .xdsoft_custom .xdsoft_range2dslider_box{
 min-height:8px;
 background:rgba(127,127,127,0.5);
 border-radius:1px;
 border-style:solid;
 }
 .xdsoft_custom .xdsoft_slider_label{
 background: red;
 color: #fff;
 bottom: 22px !important;
 }
 .xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
 border-top-color:red;
 }
</style>
<script>
$('#slider4').range2DSlider({
 grid:false,
 height:0,
 className:'xdsoft_custom',
 showLegend:[1,0],
 axis:[[0,0.1]],
 tooltip:['top'],
 alwShowTooltip:[true],
 allowAxisMove:['x'],
 printLabel:function( val ){
 return val[0].toFixed(3);
 }
}).range2DSlider('value',[[0.05,0]]);
</script>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

以上就是为大家分享的jQuery实现的数值范围选取特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
JS中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JavaScript Prototype对象
Jan 07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
微信小程序wx:for循环的实例详解
Oct 07 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
You might like
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
获取body标签的两种方法
2011/10/13 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
Python3.x中自定义比较函数
2015/04/24 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python实现微信小程序自动回复
2018/09/10 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python和php哪个更适合写爬虫
2020/06/22 Python
canvas实现滑动验证的实现示例
2020/08/11 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
年终总结会议主持词
2014/03/17 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技