jQuery实现移动端滑块拖动选择数字效果
更新时间：2022年02月23日 08:36:48 投稿：lijiao
这篇文章主要介绍了jQuery实现移动端滑块拖动选择数字效果，jQuery实现移动端滑块拖动效果，感兴趣的小伙伴们可以参考一下
本文为大家分享了基于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 隐藏/显示效果函数,结合实例形式分析了hide()、show()及toggle()函数的基本功能与使用技巧,需要的朋友可以参考下2020-05-05
这里给大家分享的是使用jQuery实现简单的无缝滚动的效果，其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;，有需要的小伙伴可以参考下。2015-04-04
基于JQUERY的多级联动实现代码，需要的朋友可以参考下，另外脚本之家特为大家多整理了几个大家可以测试下2012-01-01
下面小编就为大家带来一篇jQuery获取同级元素的简单代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jQuery基本选择器和层次选择器的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
用JQuery的Ajax从后台提取数据后想把它赋值给全局变量，怎么都赋不进，原因是数据还没提取出来，你当然赋不进去2014-08-08
这篇文章主要介绍了Jquery遍历Json数据的方法,涉及jQuery遍历json格式数据的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了jquery自定义表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双面积图效果,结合实例形式分析了jQuery使用插件FusionCharts结合xml格式数据绘制2D双面积图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-04-04
这篇文章主要教大家如何巧用jQuery选择器提高写表单效率的方法，感兴趣的小伙伴们可以参考一下2016-08-08
最新评论