编程 Javascript

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

Posted in Javascript onDecember 24, 2015

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

运行效果图：

实现代码：

<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实现移动端滑块拖动选择数字效果的代码，希望对大家的学习有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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