jQuery实现的数值范围range2dslider选取插件特效多款代码分享
发布时间：2020-12-14 22:37:01 所属栏目：资源 来源：网络整理
导读：本篇章节讲解jQuery实现的数值范围range2dslider选取插件特效。供大家参考研究。具体如下： 这是是一款简单的jquery插件，使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。 运行效果图： -------------------查看效果 下载源码-----
|
本篇章节讲解jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下：
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
<!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,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,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,[3,0],[6,6]]);
$('#slider')
.range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').range2DSlider({
template:'horizontal',value:[[5,[7,0]],onlyGridPoint:true,round:true,axis:[[-3,-2,-1,1,3,4,6,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,[0,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,showRanges:ranges,axis:[[-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,127,0.5);
border:1px outset #ddd;
}
.xdsoft_custom .xdsoft_range2dslider_box{
min-height:8px;
background:rgba(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',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实现的数值范围选取特效代码，希望大家可以喜欢。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
