jQuery实现移动端滑块拖动选择数字效果


Posted in Javascript onDecember 24, 2015

本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下

运行效果图:

jQuery实现移动端滑块拖动选择数字效果

实现代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
 .slider-box{ background:#F0EFEB; font-family:Microsoft Yahei; padding-bottom:10px}
 .slider-box .item{ padding:10px}
 .slider-box .item .tag, .slider-box .item .slider, .slider-box .item .val{ float:left; margin-right:18px}
 .slider-box .item .slider{ width:400px}
 .slider-box .item .slider div{ background:#8FBF0B; border:none; height:0.5em; margin-top:0.5em}
 .slider-box .item .slider div .ui-slider-handle{ background:#F4F3F1; width:1em; height:1em; border-radius:1em}
 .slider-box .item .val input{ border:none; border-bottom:1px solid #ABADA8; background:none; padding:0.1em 1em; color:#E4531C; font-weight:bold; font-size:1em; width:5em; text-align:center}
 .clr{ clear:both}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 <div class="slider-box">
 <div class="item">
 <div class="tag">骑行里程:</div>
 <div class="slider">
 <div id="budget"></div>
 </div>
 <div class="val"><input value="8800" name="budget" /></div>
 </div>
 <div class="clr"></div>
 <div class="item">
 <div class="tag">骑行天数:</div>
 <div class="slider">
 <div id="days"></div>
 </div>
 <div class="val"><input value="9" name="days" /></div>
 </div>
 <div class="clr"></div>
 </div>
 <script>
 $("#budget").slider({
 min: 2000,
 max: 17000,
 step: 100,
 value: $('input[name="budget"]').val(),
 slide: function( event, ui ) {
 $('input[name="budget"]').val(ui.value)
 }
 });
 $("#days").slider({
 min: 1,
 max: 20,
 value: $('input[name="days"]').val(),
 slide: function( event, ui ) {
 $('input[name="days"]').val(ui.value)
 }
 });
 </script>
</body>
</html>

以上就是jQuery实现移动端滑块拖动选择数字效果的代码,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
js select常用操作控制代码
Mar 16 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
不得不分享的JavaScript常用方法函数集(上)
Dec 23 #Javascript
JQuery实现的按钮倒计时效果
Dec 23 #Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 #Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 #Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 #Javascript
JavaScript中的函数(二)
Dec 23 #Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
2014/03/05 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
vue 子组件和父组件传值的示例
2020/09/11 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
python实现扫雷游戏的示例
2020/10/20 Python
Python 多进程原理及实现
2020/12/21 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
护士自荐信
2013/10/25 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
转党组织关系介绍信
2014/01/08 职场文书
食品安全工作实施方案
2014/03/26 职场文书
大学生自我评价范文
2015/03/03 职场文书
公司岗位说明书
2015/10/08 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书