本文实例讲述了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,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实现的数值范围选取特效代码,希望大家可以喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。