jquery实现鼠标拖拽滑动效果来选择数字的方法


Posted in Javascript onMay 04, 2015

本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下:

这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>demo</title>
<link rel="stylesheet" href="css/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="js/jquery-1.10.2.js"></script>
<script src="js/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 相关文章推荐
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
vue使用自定义icon图标的方法
May 14 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
详解微信小程序支付流程与梳理
Jul 16 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 #Javascript
javascript白色简洁计算器
May 04 #Javascript
jQuery简单实现日历的方法
May 04 #Javascript
jquery插件jSignature实现手动签名
May 04 #Javascript
js简单实现竖向tab选项卡的方法
May 04 #Javascript
PHP+mysql+Highcharts生成饼状图
May 04 #Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
php文档更新介绍
2011/07/22 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
JavaScript 基础问答三
2008/12/03 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
swiper实现异形轮播效果
2019/11/28 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
利用Tkinter和matplotlib两种方式画饼状图的实例
2017/11/06 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
基于Python实现拆分和合并GIF动态图
2019/10/22 Python
python识别验证码图片实例详解
2020/02/17 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
2014年设计师工作总结
2014/11/25 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Python 阶乘详解
2021/10/05 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
讲解MySQL增删改操作
2022/05/06 MySQL