Home > Article > Web Front-end > How to use jQuery to manually drag and control the progress bar function

How to use jQuery to manually drag and control the progress bar function

php中世界最好的语言Original: 2018-06-07 14:33:441736browse

This time I will introduce to you how to use jQuery to manually drag and control the progress bar. What are the precautions for using jQuery to manually drag and control the progress bar? The following is a practical case, let's take a look.

This is a small program to manually control the progress bar, share it with everyone:

<!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>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>
 <p id="box">
 <p id="bg">
  <p id="bgcolor"></p>
 </p>
 <p id="bt"></p>
 </p>
 <p id="text"></p>
 <script type="text/javascript">
 (function($){
 var $box = $(&#39;#box&#39;);
 var $bg = $(&#39;#bg&#39;);
 var $bgcolor = $(&#39;#bgcolor&#39;);
 var $btn = $(&#39;#bt&#39;);
 var $text = $(&#39;#text&#39;);
 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(&#39;left&#39;,left);
   $bgcolor.width(left);
   $text.html(&#39;位置:&#39; + parseInt(left/2) + &#39;%&#39;);
  }
  });
  $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(&#39;left&#39;,left);
   $bgcolor.stop().animate({width:left},200);
   $text.html(&#39;位置:&#39; + parseInt(left/2) + &#39;%&#39;);
  }
  });
 })(jQuery);
 </script>
</p>
</body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

How to use jQuery to manually drag and control the progress bar function

Related articles