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 相关文章推荐
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
浅谈Angular路由守卫
Aug 26 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
QueryPath PHP 中的jQuery
2010/04/11 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js实现拖拽效果
2015/02/12 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
Python获取任意xml节点值的方法
2015/05/05 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python实现梯度下降法
2020/03/24 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
SQL面试题
2013/04/30 面试题
应聘教师推荐信
2013/10/31 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
师范毕业生求职信
2014/07/11 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
nginx结合openssl实现https的方法
2021/07/25 Servers
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技