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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
Oct 12 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
jQuery的position()方法详解
Jul 19 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
js+css3制作时钟特效
Oct 16 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
原生js验证简洁注册登录页面
Dec 17 Javascript
微信小程序实现星星评分效果
Nov 01 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
德生9700DX电路分析
2021/03/02 无线电
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Smarty模板语法详解
2019/07/20 PHP
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python的文件操作方法汇总
2017/11/10 Python
python实现聚类算法原理
2018/02/12 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
关于python多重赋值的小问题
2019/04/17 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python解释器安装教程的方法步骤
2020/07/02 Python
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
员工评语大全
2014/01/19 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
教师师德演讲稿
2014/05/06 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
在人间读书笔记
2015/06/30 职场文书
小数乘法教学反思
2016/02/22 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server