How to use jQuery to manually drag and control the progress bar function-JS Tutorial-php.cn

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

php中世界最好的语言

Release： 2018-06-07 14:33:44

Original

1787 people have browsed it

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>

Copy after login

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 !