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 Easyui一些用法
Aug 01 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 14 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下实现折线图效果的代码
2007/04/28 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
致400米运动员广播稿
2014/02/07 职场文书
人力资源总监工作说明
2014/03/03 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python