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+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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
我的群发邮件程序
2006/10/09 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
php适配器模式简单应用示例
2019/10/23 PHP
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
详解原生js实现offset方法
2017/06/15 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
python计算N天之后日期的方法
2015/03/31 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
质检部职责
2013/12/28 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
教师节宣传方案
2014/05/23 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS