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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 鼠标拖拽移动子窗体的JS实现

    鼠标拖拽移动子窗体的JS实现

    1.子窗体 在设计网站的时候,我们需要设计一些模态的子窗体,比如 这一步很容易实现,只需要div+css就ok了,请看代码: 复制代码 代码如下: <div class="modal-background"></div>    <div class="modal-window">        <div class="head">            <center>点住着块区域可以改

  • js实现登录框鼠标拖拽效果

    js实现登录框鼠标拖拽效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i

  • javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

    mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p

  • js实现百度登录框鼠标拖拽效果

    js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏 注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照

  • JS鼠标拖拽实例分析

    JS鼠标拖拽实例分析

    本文实例讲述了JS鼠标拖拽实现方法.分享给大家供大家参考,具体如下: JS代码: <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠标按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X

  • jsMind通过鼠标拖拽的方式调整节点位置

    jsMind是一个纯javascript实现的思维导图类库,基于html5的canvas实现,以BSD协议开源. 提供了思维导图的显示,编辑等功能,支持freemind数据格式,有丰富的开发接口可供使用,具体功能请访问软件主页进一步了解. jsMind 现已支持通过鼠标拖拽的方式调整节点位置了.只需引用最新版本的 jsmind.js 以及 jsmind.draggable.js 即可使用该功能.需要注意的是,当思维导图设置为不可编辑的时候,拖拽功能也将同时禁止. 请访问 项目主页:http://

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

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

    本文实例讲述了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

  • Vue 实现一个简单的鼠标拖拽滚动效果插件

    Vue 实现一个简单的鼠标拖拽滚动效果插件

    最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了. github 地址:github.com/qq449245884- 最近在做一个新的项目,有个需要是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会随着的鼠标的拖拽而移动,如果页面有内容,里面的内容也需要跟着拖动的外层整体移到. 一开始没啥思路,所以就发了个朋友圈,得到的答案挺多的,主要还是用拖拽之类的,但这个拖拽只是单个元素的拖动,我想要的整个视图的拖动. 这里线索又断了.

  • jQuery实现鼠标拖拽登录框移动效果

    本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下 1.jQuery代码 <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 点击登录跳转 $(

  • jquery网页元素拖拽插件效果及实现

    jquery网页元素拖拽插件效果及实现

    复制代码 代码如下: ;(function($){$.fn.extend({"jlzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragindex = $(this);var arrzindex = new array();for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值,并按拖拽项顺序设置z-index值var zidxnum = 10000 - i - i -2;arr

  • Swing中依据鼠标拖拽来画出矩形的实现方法

    画了好久,草要么就是画了,没插掉原先线条,要么就是画第二个的时候第一个也被擦掉,但其实只要调用repaint方法就好了- import javax.swing.*; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; class Rect extends JFrame{ public static void main(String[] args) { Rect r=ne

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!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 http-eq

  • jQuery控制Div拖拽效果完整实例分析

    本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!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"> <

  • jQuery实现div拖拽效果实例分析

    本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <script type=&q

  • jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    jQuery拖拽排序插件制作拖拽排序效果(附源码下载)

    使用jquery拖拽排序插件制作拖拽排序效果是一款非常实用的鼠标拖拽布局插件.效果图如下: 效果演示         源码下载 html代码: <h1>水平拖拽</h1> <div class="demo"> <div class="item item1"><span>1</span></div> <div class="item item2"><

  • js实现鼠标拖拽div左右滑动

    js实现鼠标拖拽div左右滑动

    本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.min.js"></script> <style&

随机推荐