Jquery插件 自制进度条

　　HTML

1     <div class="progress">
2         <div class="progress_bg">
3             <div class="progress_bar"></div>
4         </div>
5         <div class="progress_btn"></div>
6         <div class="text">0%</div>
7     </div>

CSS

 1         .progress {
 2             position: relative;
 3             width: 300px;
 4             margin: 100px auto;
 5         }
 6 
 7         .progress_bg {
 8             height: 10px;
 9             border: 1px solid #ddd;
10             border-radius: 5px;
11             overflow: hidden;
12             background-color: #f2f2f2;
13         }
14 
15         .progress_bar {
16             background: #5FB878;
17             width: 0;
18             height: 10px;
19             border-radius: 5px;
20         }
21 
22         .progress_btn {
23             width: 20px;
24             height: 20px;
25             border-radius: 5px;
26             position: absolute;
27             background: #fff;
28             left: 0px;
29             margin-left: -10px;
30             top: -5px;
31             cursor: pointer;
32             border: 1px #ddd solid;
33             box-sizing: border-box;
34         }
35 
36             .progress_btn:hover {
37                 border-color: #F7B824;
38             }

JQUERY

 1 $(function () {
 2     var tag = false, ox = 0, left = 0, bgleft = 0;
 3     $('.progress_btn').mousedown(function (e) {
 4         ox = e.pageX - left;
 5         tag = true;
 6     });
 7     $(document).mouseup(function () {
 8         tag = false;
 9     });
10     $('.progress').mousemove(function (e) {//鼠标移动
11         if (tag) {
12             left = e.pageX - ox;
13             if (left <= 0) {
14                 left = 0;
15             } else if (left > 300) {
16                 left = 300;
17             }
18             $('.progress_btn').css('left', left);
19             $('.progress_bar').width(left);
20             $('.text').html(parseInt((left / 300) * 100) + '%');
21         }
22     });
23     $('.progress_bg').click(function (e) {//鼠标点击
24         if (!tag) {
25             bgleft = $('.progress_bg').offset().left;
26             left = e.pageX - bgleft;
27             if (left <= 0) {
28                 left = 0;
29             } else if (left > 300) {
30                 left = 300;
31             }
32             $('.progress_btn').css('left', left);
33             $('.progress_bar').animate({ width: left }, 300);
34             $('.text').html(parseInt((left / 300) * 100) + '%');
35         }
36     });
37 });

 

posted @ 2017-08-29 15:12  咖啡漩涡  阅读(304)  评论(0)  编辑  收藏  举报