本文实例讲述了jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下：
这是是一款简单的jquery插件，使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。
运行效果图： -------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery实现的数值范围选取特效代码如下
<!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>jQuery数值范围选取插件range2dslider </title> <script type="text/javascript" src="https://www.jb51.net/jquery.js"></script> <link href="https://www.jb51.net/jquery.range2dslider.css"> <script type="text/javascript" src="https://www.jb51.net/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> <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> <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> <input> <input> <input> <input> <input> <div></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> <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> <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> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> </div> </body> </html>
以上就是为大家分享的jQuery实现的数值范围选取特效代码，希望大家可以喜欢。
您可能感兴趣的文章: