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


Posted in Javascript onAugust 27, 2015

本文实例讲述了jQuery实现的数值范围range2dslider选取插件特效。分享给大家供大家参考。具体如下:
这是是一款简单的jquery插件,使用该插件后实现鼠标可以滑动(拖动)控制数值范围选取的特效代码。
运行效果图:                             -------------------查看效果 下载源码-------------------

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

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的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实现的数值范围选取特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
jQuery手机拨号界面特效代码分享
Aug 27 #Javascript
JS实现自动切换文字的导航效果代码
Aug 27 #Javascript
javascript实现自动输出文本(打字特效)
Aug 27 #Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 #Javascript
javascript模拟C#格式化字符串
Aug 26 #Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 #Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 #Javascript
You might like
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP4 与 MySQL 交互使用
2006/10/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
设定php简写功能的方法
2019/11/28 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
浅谈JavaScript中数组的增删改查
2016/06/20 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
python通过文件头判断文件类型
2015/10/30 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python实现音乐下载的统计
2018/06/20 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
安全员岗位职责
2013/11/11 职场文书
公司晚会策划方案
2014/05/17 职场文书
超市开店计划书
2014/09/15 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
个人求职信格式范文
2015/03/20 职场文书
Python生成九宫格图片的示例代码
2021/04/14 Python
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js