jQuery手动拖动进度条

@SIMIN

于 2019-08-19 14:03:46 发布

阅读量340

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/SIMIN_1617/article/details/99723582

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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;
    border: 1px solid transparent;
  }
  #bg{
    height: 2px;
    background: #515151;
    overflow: hidden;
  }
  #bgcolor{
    background: #1296db;
    width: 0;
    height: 2px;
    border-radius: 5px;
  }
  #bt{
    width: 24px;
    height: 24px;
    background-color: #fff;
    border:1px solid #515151;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: -12px;
    left: 0px;
    margin-left: -12px;
    cursor: pointer;
  }
  #text{
    font-size: 16px;
    margin-left:12px;
  }
  .flex{
    display: flex;
    align-items: center;
  }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
  <div class="flex">
    <div id="box">
      <div id="bg">
        <div id="bgcolor"></div>
      </div>
      <div id="bt"></div>
    </div>
    <div id="text">1年</div>
  </div>
  <script type="text/javascript">
    (function($){
      var experience_num=1;
      if(experience_num>0){
        experience(experience_num);
      }
      function experience(num){
        var $box = $('#box');
        var $bg = $('#bg');
        var $bgcolor = $('#bgcolor');
        var $btn = $('#bt');
        var $text = $('#text');
        var statu = false;
        var ox = 0;
        var left = num*20;
        var bgleft = num*20;

        $btn.css({'left':left});
        $bgcolor.width(left);
        $btn.mousedown(function(e){
          //鼠标指针的位置，相对于文档的左边缘
          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/10) + '年');
          }
        });

        $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/10) + '年');
            }
        });
      }
    })(jQuery);
  </script>
</body>
</html>

@SIMIN

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery手动拖动进度条

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery手动拖动进度条</title&g...
复制链接

扫一扫

专栏目录