jQuery range2dslider实现的数值范围选择插件特效 共享多个代码

本文给出了一个由jQuery实现的数值范围range2dslider的插件效果的例子。分享给大家参考。具体如下：这是一个简单的jquery插件。使用此插件后，鼠标可以滑动(拖动)控制数值范围选择的特效代码。运行渲染：查看效果并下载源代码。

提示：如果浏览器工作不正常，可以尝试切换浏览模式。为大家分享的jQuery实现的数值范围选择特效代码如下

！doctype html html lang=' en ' hearta charset=' GB 2312 ' title jquery数值范围选取插件范围2d滑块/标题脚本类型=' text/JavaScript ' src=' http : jquery。js '/脚本链接rel='样式表href=' jquery。范围2d滑块。CSS ' script type=' text/JavaScript ' src=' http : jquery。范围2d滑块。js '/脚本样式正文，html { margin :0 pxpadding :0 px } ul { margin :0 px 0pxpadding :10 px 25px } body div { margin 33600 px 20pxpadding :20 px背景技术：rgba(184，184，184，0.1)；}/style/headdy div H2简单的二维滑块/H2输入id=' slider '脚本窗口。一个错误=函数(消息，网址，行号){警报('错误消息： '消息' \努尔： '网址' \ n行号： '行号);返回真；} $(' # slider ')。range 2d滑块({ grid : true，axis:[[1，2，5，7，10]，[2，5，10]]，projections:true，showLegend:[1，1]，allowexismove :[' both ']，print label 3360 function(val){ this。预测这个。项目[0].查找('。xdsoft _ projection _ value _ x’).文本(val[1].toFixed(5))；返回值[0]。toFixed(5)；}}) .range2DSlider('value '，[[0，1]，[3，0]，[6，6]])；$(' # slider ')。范围2滑块()；/scripth2水平滑块/H2输入id='幻灯片R1 '脚本$(' #幻灯片R1 ')。范围2滑块({ template : '水平'，value:[[5，0]，[7，0]]，onlyGridPoint:true，round:true，axis 3360[[-3，-2，-1，0，1，2，3，4，5，6，7，8，9，10]])}；/scripth2垂直滑块/H2 input class=' slide 2 ' input class=' slide 2 ' input class=' slide 2 ' input class=' slide 2 ' input class=' slide 2 ' div style=' clear : both；float:none/div脚本$(。幻灯片R2’)。范围2滑块({ template : '垂直'，value:[[0，5]]，showrange 3360[[0，1]]，style: ' float:left边距-左侧：25 px，axis:[[0，1]，[0，10]]，round:true，print label : function(val){ return val[1]' yo；}});/scripth2平滑滑块(x)/H2输入类别='幻灯片3 '脚本定义变量值=[];定义变量范围=[];var city=['阿布贾','阿克拉','亚当斯敦','亚的斯亚贝巴','阿尔及尔','阿洛菲','安曼','阿姆斯特丹','安道尔','安卡拉','塔那那利佛','阿皮亚','阿什哈巴德','阿斯马拉','阿斯塔纳','亚松森','雅典','阿瓦鲁阿','巴格达','巴库','巴马科','班达','曼谷','班吉','班珠尔','巴斯特尔','北京','贝鲁特','贝尔格莱德','贝尔莫潘'];对于(var i=-10，k=0；i=10I，k ){ values.push([i，Math.sin(i)，city[I 10]])；if(i10)range . push([k，k ^ 1])；} $(.幻灯片R3’)。范围2滑块({ x : '右侧'，y: '顶部'，showLegend:[0，0]，showRanges:ranges，axis 3360[[-10，10]，[-1.5，1.5]]，allowismove 3360[' y ']，打印标签3360函数(val){ return val[1]).toFixed(2)' br ' val[2]；} }).range2DSlider('value '，values)；/scripth2自定义风格滑块/H2输入id='幻灯片4 '样式xdsoft_custom .xdsoft _ range 2d slider _ runner { border-radius :1 px；margin:0px 0px -4px -8px！重要；background:rgba(0，0，127，0.5)；border:1px开头# ddd}。xdsoft_custom .xdsoft _ range 2d slider _ box {最小高度：8 px背景：rgba(127，127，127，0.5)；边界半径：1 px边框式：实心；} .xdsoft_custom .xdsoft _ slider _ label {背景：红色；color: # fffbottom: 22px！重要；} .xdsoft_custom .{边框-顶部颜色：红色}之后的xdsoft _ slider _ label。xdsoft _ slider _ label _ top :}/style script $(' # slide R4 ')。范围2d滑块({ grid : false，height:0，className: ' xdsoft _ custom '，showLegend:[1，0]，axis:[[0，0.1]]，tooltip:['top']，alwshow tooltip 3360[true]，allowwaxismove 3360[' x ']，打印标签3360函数(valtoFixed(3)；}}).range2DSlider('value '，[[0.05，0]])；/script/div div style=' text-align : center；余量：50 px 0；font : normal 14px/24px ' MicroSoft YaHei '；p适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。不支持IE8及以下浏览器/p/div/body/html以上就是为大家分享的jQuery实现的数值范围选取特效代码，希望大家可以喜欢。