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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
iview table高度动态设置方法
Mar 14 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 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的图形函数中显示汉字
2006/10/09 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
jquery对表单操作2
2011/04/06 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
python 输出所有大小写字母的方法
2019/01/02 Python
详解Python循环作用域与闭包
2019/03/21 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
详解python metaclass(元类)
2020/08/13 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书