jQuery实现可拖动进度条实例代码


Posted in jQuery onJune 21, 2017

html

 <div class="progress">
   <div class="progress_bg">
    <div class="progress_bar"></div>
   </div>
   <div class="progress_btn"></div>
   <div class="text">0%</div>
  </div>

css

  .progress{position: relative; width:300px;margin:100px auto;}
  .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
  .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}
  .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff; 
  left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}
  .progress_btn:hover{border-color:#F7B824;}

js 

$(function(){
    var tag = false,ox = 0,left = 0,bgleft = 0;
    $('.progress_btn').mousedown(function(e) {
     ox = e.pageX - left;
     tag = true;
    });
    $(document).mouseup(function() {
     tag = false;
    });
    $('.progress').mousemove(function(e) {//鼠标移动
     if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').width(left);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
    $('.progress_bg').click(function(e) {//鼠标点击
     if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      if (left <= 0) {
       left = 0;
      }else if (left > 300) {
       left = 300;
      }
      $('.progress_btn').css('left', left);
      $('.progress_bar').animate({width:left},300);
      $('.text').html(parseInt((left/300)*100) + '%');
     }
    });
   });

效果图

jQuery实现可拖动进度条实例代码

实现原理

首先是用mousedown()鼠标按下事件保存一个状态值,mouseup()鼠标抬起事件取消该状态,再同时配合mousemove()鼠标移动事件,实现按住拖动的效果。

在鼠标移动的同时去改变精度条的长度和按钮的相对左部的距离。

然后就是距离的计算,主要利用的就是pageX() 属性。pageX是鼠标指针相对于文档的左边缘的位置。在鼠标按下是就记录相对位置,在鼠标移动后就可求出鼠标移动的距离。从而改变按钮位置和进度条长度。

以上所述是小编给大家介绍的jQuery实现可拖动进度条demo,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jQuery实现可以扩展的日历
Dec 01 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
jquery加载单文件vue组件的方法
Jun 20 #jQuery
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP实现QQ登录实例代码
2016/01/14 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
js定时器(执行一次、重复执行)
2014/03/07 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
微信小程序如何使用globalData的方法
2019/06/06 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python列表去重的二种方法
2014/02/14 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python实现把数字转换成中文
2015/06/29 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
几个数据库方面的面试题
2016/07/01 面试题
校园餐饮创业计划书
2014/01/10 职场文书
群众路线专项整治方案
2014/10/27 职场文书
谢师宴邀请函
2015/02/02 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js