用百分比去写啊
//css部分p{ width: 640px}
p i {
width: 40%
display: inline-block
background-color: #ededed
height: 1.25rem
}
//html部分
<p>我是进度条<i></i>60%</p>
h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块,最重要的几个模块包括:选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size:规定背景图片的尺寸
background-origin:规定背景图片的定位区域
background-clip:规定背景的绘制区域
文本效果(常用)
text-shadow:设置文字阴影
word-wrap:强制换行
word-break
css3提出@font-face规则,规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform:向元素应用2/3D转换
transition:过渡
动画
@keyframes规则:
animation、animation-name、animation-duration等
用户界面(常用)
box-sizing、resize
css3新增伪类
:nth-child()
:nth-last-child()
:only-child
:last-child
:nth-of-type()
:only-of-type()
:empty
:target 这个伪类允许我们选择基于URL的元素,如果这个元素有一个识别器(比如跟着一个#),那么:target会对使用这个ID识别器的元素增加样式。
:enabled
:disabled
:checked
:not
首先提一个问题有哪些方式能完成对滑动条的美化?目前我所能想到的就是如下的两种方案:直接通过css完成样式改造
将滑动条隐藏(设置opacity: 0),通过自定义div实现
这次所要介绍的第一种较为简单的实现方式。
美化滑动控件,需要完成以下的五个步骤:
去除系统默认的样式;
给滑动轨道(track)添加样式;
给滑块(thumb)添加样式;
根据滑块所在位置填充进度条;
实现多浏览器兼容。
以上就是实现滑动控件美化的整个流程。我们今天所要达到的效果是这样的:这里写图片描述如果想要实现填充进度条的效果,在IE 9以上的浏览器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper来自定义进度条;在Firefox浏览器中则可以通过::-moz-range-progress来自定义;而Chrome浏览器中不支持直接设置进度条,而达到填充的效果,所以首先针对Chrome浏览器来实现整个流程。
3.1 去除系统默认的样式
这是美化滑动控件的第一步,这步操作是为了不使用原有的样式,使之后的自定义样式有效。代码很简单如下所示,不过要注意的是对基于 webkit 的浏览器,如Chrome, Safari, Opera等,滑块也要移除默认样式。
input[type=range] {
-webkit-appearance: none
width: 300px
border-radius: 10px/*这个属性设置使填充进度条时的图形为圆角*/
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none
}
1
2
3
4
5
6
7
8
3.2 给滑动轨道(track)添加样式
正式开始自定义控件样式了。首先是自定义滑动控件的轨道,代码很简单,直接贴出来。
input[type=range]::-webkit-slider-runnable-track {
height: 15px
border-radius: 10px/*将轨道设为圆角的*/
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112/*轨道内置阴影效果*/
}
1
2
3
4
5
原始的控件获取到焦点时,会显示包裹整个控件的边框,所以还需要把边框取消。
input[type=range]:focus {
outline: none
}
1
2
3
3.3 给滑块(thumb)添加样式
下面对滑块的样式进行变更,css代码也不是很复杂,如下所示:
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none
height: 25px
width: 25px
margin-top: -5px/*使滑块超出轨道部分的偏移量相等*/
background: #ffffff
border-radius: 50%/*外观设置为圆形*/
border: solid 0.125em rgba(205, 224, 230, 0.5)/*设置边框*/
box-shadow: 0 .125em .125em #3b4547/*添加底部阴影*/
}
1
2
3
4
5
6
7
8
9
10
3.4 根据滑块所在位置填充进度条
新建一个RangeSlider.js文件,实现对滑动控件属性的设置、事件的监听、以及设置回调函数。监听input事件时,对进度条进行填充,让我们来直接看看代码是怎么实现的。
$.fn.RangeSlider = function(cfg){
this.sliderCfg = {
min: cfg &&!isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg &&!isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg &&Number(cfg.step) ? cfg.step : 1,
callback: cfg &&cfg.callback ? cfg.callback : null
}
var $input = $(this)
var min = this.sliderCfg.min
var max = this.sliderCfg.max
var step = this.sliderCfg.step
var callback = this.sliderCfg.callback
$input.attr('min', min)
.attr('max', max)
.attr('step', step)
$input.bind("input", function(e){
$input.attr('value', this.value)
$input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' )
if ($.isFunction(callback)) {
callback(this)
}
})
}
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
通过cfg对象来设置滑动控件的min, max, step属性。
对控件绑定input事件,当滑块滑动时会触发该事件,此时完成对进度条的填充,这里我使用的是线性渐变linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)这种方式,淡蓝色和白色两种颜色从左至右渐变,渐变的长度根据此时控件的value来确定。事件触发时同时调用回调函数,回调函数完成的功能可自行设计。
当然你还可以根据自己的需求来监听其他事件,比如change事件,当value值改变时会触发,用法上很灵活。
如何调用这个js文件里的函数来完成配置呢?很简单,首先在html文件里导入这个js文件,然后直接定义script节点,html代码如下:
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript"src="src/RangeSlider.js"></script>
<link rel="stylesheet" href="css/slider.css" type="text/css">
</head>
<body>
<div id="test">
<input type="range" value="0">
</div>
<script>
var change = function($input) {
/*内容可自行定义*/
console.log("123")
}
$('input').RangeSlider({ min: 0, max: 100, step: 0.1, callback: change})
</script>
</body>
</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
至此基于Chrome浏览器,对滑动控件的美化已全部完成。最后只剩下多浏览器的兼容问题了。
3.5 实现多浏览器兼容
如果要兼容Firefox浏览器,只需要把上述css代码中的 ::-webkit-slider-runnable-track 替换为 ::-moz-range-track ,就可以完成对轨道的美化了;把css代码中的 ::-webkit-slider-thumb 替换为 ::-moz-range-thumb ,这是对滑块的样式进行改造;而如果是要填充进度条就很简单了,不需要像之前在RangeSlider.js中 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ )这样实现填充,只需要新增如下的css代码即可:
input[type=range]::-moz-range-progress {
background: linear-gradient(to right, #059CFA, white 100%, white)
height: 13px
border-radius: 10px
}
1
2
3
4
5
如果要想兼容IE 9以上版本的浏览器,对上述css代码要修改的地方稍微多了一些,下面先将针对IE 9+的css代码贴出来:
input[type=range] {
-webkit-appearance: none
width: 300px
border-radius: 10px
}
input[type=range]::-ms-track {
height: 25px
border-radius: 10px
box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112
border-color: transparent/*去除原有边框*/
color: transparent/*去除轨道内的竖线*/
}
input[type=range]::-ms-thumb {
border: solid 0.125em rgba(205, 224, 230, 0.5)
height: 25px
width: 25px
border-radius: 50%
background: #ffffff
margin-top: -5px
box-shadow: 0 .125em .125em #3b4547
}
input[type=range]::-ms-fill-lower {
/*进度条已填充的部分*/
height: 22px
border-radius: 10px
background: linear-gradient(to right, #059CFA, white 100%, white)
}
input[type=range]::-ms-fill-upper {
/*进度条未填充的部分*/
height: 22px
border-radius: 10px
background: #ffffff
}
input[type=range]:focus::-ms-fill-lower {
background: linear-gradient(to right, #059CFA, white 100%, white)
}
input[type=range]:focus::-ms-fill-upper {
background: #ffffff
}
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
以上就是为了兼容IE 9+完整的css代码,也不是很复杂,同样的和Firefox浏览器一样,它支持直接使用css来自定义进度条,所以原先在RangeSlider.js里的 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ )填充方法就不需要啦。
下面提几个IE浏览器需要特别注意的问题:
在测试时发现,IE浏览器没有加载css文件,导致样式没有发生改变,如果你的使用E浏览器测试时也存在这样的问题,那么你需要将HTML第一行的 <!DOCTYPE html>改为 <!DOCTYPE>;
拖动滑块时,IE浏览器没有触发 input 事件,所以只能选择将RangeSlider.js中的监听事件改为 change 事件。