jQuery实现的手动拖动控制进度条效果示例【测试可用】


Posted in jQuery onApril 18, 2018

本文实例讲述了jQuery实现的手动拖动控制进度条效果。分享给大家供大家参考,具体如下:

这是一个手动控制进度条的小程序,分享给大家:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery手动拖动进度条</title>
<style type="text/css">
 #box{position: relative; width: 200px; height: 50px; border: 1px solid #eee; margin: 50px auto 0;}
 #bg{height: 10px; margin-top: 19px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;}
 #bgcolor{background: #5889B2; width: 0; height: 10px; border-radius: 5px;}
 #bt{width: 34px; height: 34px;background-color: red; border-radius: 17px; overflow: hidden; position: absolute; left: 0px; margin-left: -17px; top: 8px; cursor: pointer;}
 #text{width: 200px; margin: 0 auto; font-size: 16px; line-height: 2em;}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
 <div id="box">
 <div id="bg">
  <div id="bgcolor"></div>
 </div>
 <div id="bt"></div>
 </div>
 <div id="text"></div>
 <script type="text/javascript">
 (function($){
 var $box = $('#box');
 var $bg = $('#bg');
 var $bgcolor = $('#bgcolor');
 var $btn = $('#bt');
 var $text = $('#text');
 var statu = false;
 var ox = 0;
 var lx = 0;
 var left = 0;
 var bgleft = 0;
  $btn.mousedown(function(e){
  lx = $btn.offset().left;
  ox = e.pageX - left;
  statu = true;
  });
  $(document).mouseup(function(){
  statu = false;
  });
  $box.mousemove(function(e){
  if(statu){
   left = e.pageX - ox;
   if(left < 0){
   left = 0;
   }
   if(left > 200){
   left = 200;
   }
   $btn.css('left',left);
   $bgcolor.width(left);
   $text.html('位置:' + parseInt(left/2) + '%');
  }
  });
  $bg.click(function(e){
  if(!statu){
   bgleft = $bg.offset().left;
   left = e.pageX - bgleft;
   if(left < 0){
   left = 0;
   }
   if(left > 200){
   left = 200;
   }
   $btn.css('left',left);
   $bgcolor.stop().animate({width:left},200);
   $text.html('位置:' + parseInt(left/2) + '%');
  }
  });
 })(jQuery);
 </script>
</div>
</body>
</html>

运行效果:

jQuery实现的手动拖动控制进度条效果示例【测试可用】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery仿京东商品放大浏览页面
Jun 06 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery实现广告上下滚动效果
Mar 04 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
You might like
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
Jquery遍历节点的方法小集
2014/01/22 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
python random从集合中随机选择元素的方法
2019/01/23 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
公司规章制度范本
2015/08/03 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
SQL Server表分区删除详情
2021/10/16 SQL Server
python程序的组织结构详解
2021/12/06 Python
一起来学习Python的元组和列表
2022/03/13 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫