CSS Jquery精美进度条和滑动条滑块插件

最新推荐文章于 2025-11-13 03:03:14 发布

翻译最新推荐文章于 2025-11-13 03:03:14 发布 · 1.4k 阅读

本文介绍了一款结合CSS3和jQuery制作的HTML滑动条和进度条插件，提供了丰富的样式和交互效果，适用于网页设计中各种进度显示和用户交互需求。

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

这里写图片描述

<!doctype html><html><head><meta charset="utf-8"><meta name="keywords" content="Jquery精美进度条和滑动条插件，CSS精美进度条和滑动条插件,Html进度条插件，html滑动条插件"/><meta name="description" content="CSS3和Jq制作的Html滑动条和进度条插件-彭亚欧个人博客代码演示中心" /><link rel="stylesheet" href="http://www.pengyaou.com/LegendsZ/Design/DemoShow.css"/><title>CSS，Jquery精美进度条和滑动条插件</title><style type="text/css">#Main {    width: 70%;    height: 300px;    margin: 0 auto;    margin-top: 100px;}#scrollBar {    width: 80%;    height: 10px;    background-color: #ccc;    margin: 0 auto;    margin-top: 50px;    -webkit-border-radius: 2em;    -moz-border-radius: 2em;    border-radius: 2em;    cursor: pointer;}#scroll_Track {    width: 0px;    height: 10px;    background-color: #ff4400;    -webkit-border-radius: 2em;    -moz-border-radius: 2em;    border-radius: 2em;}#scroll_Thumb {    height: 25px;    width: 25px;    background-color: #efefef;    -webkit-border-radius: 2em;    -moz-border-radius: 2em;    border-radius: 2em;    border: 1px solid #ccc;    -webkit-box-shadow: 0px 0px 5px #ccc;    -moz-box-shadow: 0px 0px 5px #ccc;    box-shadow: 0px 0px 5px #ccc;    position: absolute;    margin-top: -18px;    cursor: pointer;}#scroll_Thumb:hover {    background-color: #ff4400;    border: 1px solid #fff;}#progressBar {    width: 80%;    height: 10px;    background-color: #ccc;    margin: 0 auto;    margin-top: 50px;    -webkit-border-radius: 2em;    -moz-border-radius: 2em;    border-radius: 2em;}#progressBar_Track {    width: 200px;    height: 10px;    background-color: #ff4400;    -webkit-border-radius: 2em;    -moz-border-radius: 2em;    border-radius: 2em;}#beian {    text-align: center;    float: left;    width: 100%;    margin-top: 50px}#beian a {    color: gray;    font: 13px "微软雅黑", Arial, Helvetica, sans-serif;}</style></head><body>      <div id="Demo">        <div id="Main">          <div id="scrollBar">            <div id="scroll_Track"></div>            <div id="scroll_Thumb"></div>          </div>          <p id="scrollBarTxt" style="text-align:center;"></p>          <div id="progressBar">            <div id="progressBar_Track"></div>          </div>          <p id="progressBarTxt" style="text-align:center;"></p>        </div>      </div></body><script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script><script type="text/javascript">        $(document).ready(function(e) {            //设置最大值            ScrollBar.maxValue=100;            //初始化            ScrollBar.Initialize();            //设置最大值            ProgressBar.maxValue=100;            //设置当前刻度            var index=0;            var mProgressTimer=setInterval(function(){                index+=2;                ProgressBar.SetValue(index);                },100);        });        var ScrollBar = {            value: 20,            maxValue: 100,            step: 1,            currentX: 0,            Initialize: function() {                if (this.value > this.maxValue) {                    alert("给定当前值大于了最大值");                    return;                }                this.GetValue();                $("#scroll_Track").css("width", this.currentX + 2 + "px");                $("#scroll_Thumb").css("margin-left", this.currentX + "px");                this.Value();                $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);            },            Value: function() {                var valite = false;                var currentValue;                $("#scroll_Thumb").mousedown(function() {                    valite = true;                    $(document.body).mousemove(function(event) {                        if (valite == false) return;                        var changeX = event.clientX - ScrollBar.currentX;                        currentValue = changeX - ScrollBar.currentX-$("#Demo").offset().left;                        $("#scroll_Thumb").css("margin-left", currentValue + "px");                        $("#scroll_Track").css("width", currentValue + 2 + "px");                        if ((currentValue + 25) >= $("#scrollBar").width()) {                            $("#scroll_Thumb").css("margin-left", $("#scrollBar").width() - 25 + "px");                            $("#scroll_Track").css("width", $("#scrollBar").width() + 2 + "px");                            ScrollBar.value = ScrollBar.maxValue;                        } else if (currentValue <= 0) {                            $("#scroll_Thumb").css("margin-left", "0px");                            $("#scroll_Track").css("width", "0px");                        } else {                            ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));                        }                        $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);                    });                });                $(document.body).mouseup(function() {                    ScrollBar.value = Math.round(100 * (currentValue / $("#scrollBar").width()));                    valite = false;                    if (ScrollBar.value >= ScrollBar.maxValue) ScrollBar.value = ScrollBar.maxValue;                    if (ScrollBar.value <= 0) ScrollBar.value = 0;                    $("#scrollBarTxt").html(ScrollBar.value + "/" + ScrollBar.maxValue);                });            },            GetValue: function() {                this.currentX = $("#scrollBar").width() * (this.value / this.maxValue);            }        }        var ProgressBar = {            maxValue: 100,            value: 20,            SetValue: function(aValue) {                this.value=aValue;                if (this.value >= this.maxValue) this.value = this.maxValue;                if (this.value <= 0) this.value = 0;                var mWidth=this.value/this.maxValue*$("#progressBar").width()+"px";                $("#progressBar_Track").css("width",mWidth);                $("#progressBarTxt").html(this.value+"/"+this.maxValue);            }        }    </script><!--[if IE 7]>   <style type="text/css">            .menuItem{ margin-left:-130px; }         </style>    <![endif]--></html>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199