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 相关文章推荐
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
AngularJS ng-bind-template 指令详解
Jul 30 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
Angular 数据请求的实现方法
May 07 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
吃通javascript正则表达式
Apr 21 Javascript
不得不分享的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
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011/06/02 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
使用nodejs、Python写的一个简易HTTP静态文件服务器
2014/07/18 NodeJs
javascript操作表格排序实例分析
2015/05/06 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python日期相关操作实例小结
2019/06/24 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
基于opencv实现简单画板功能
2020/08/02 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
实习老师个人总结的自我评价
2013/09/28 职场文书
一份报关员的职业规划范文
2014/01/08 职场文书
材料加工工程求职信
2014/02/19 职场文书
会计的岗位职责
2014/03/15 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
业务员岗位职责
2015/02/03 职场文书
团员个人总结
2015/02/26 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL