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

本文实例讲述了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+"
URL: "+url+"
Line 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实现的数值范围选取特效代码，希望大家可以喜欢。