本文实例讲述了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实现的数值范围选取特效代码，希望大家可以喜欢。
新闻热点
疑难解答
