本文实例讲述了jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下：
这是是一款简单的jquery插件，使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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实现的数值范围选取特效代码，希望大家可以喜欢。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jqueryrange滑块控件
rangeslider、ion.rangeslider 中文、rangeslider.js、rangeslider 中文文档、ionrangeslider api，以便于您获取更多的相关知识。
时间： 2024-09-27 00:33:46