CSS3结合jQuery实现的3中不同样式手动控制的进度条效果免费下载
【资源属性】：资源名称：CSS3结合jQuery实现的3中不同样式手动控制的进度条效果
资源大小：7KB
资源类别： CSS特效
更新时间：2022-12-14
资源语言：简体中文
授权方式：免费下载
使用平台：Windows/Linux/Mac
下载地址：下载地址
演示地址：查看演示
可以自由更换样式的进度条效果，如果不需要动画效果只需要CSS3即可，只需要简单的代码即可手动控制进度显示的比例，非常实用的效果。
javascript代码，分别标识4种不同百分比的进度条：
[code]
<script>
$(document).ready(function(){
$('.quarter').click(function(){
$(this).parent().prev().children('span').css('width','25%');
});
$('.half').click(function(){
$(this).parent().prev().children('span').css('width','50%');
});
$('.three-quarters').click(function(){
$(this).parent().prev().children('span').css('width','75%');
});
$('.full').click(function(){
$(this).parent().prev().children('span').css('width','100%');
});
});
</script>
[/code]
javascript代码，分别标识4种不同百分比的进度条：
[code]
<script>
$(document).ready(function(){
$('.quarter').click(function(){
$(this).parent().prev().children('span').css('width','25%');
});
$('.half').click(function(){
$(this).parent().prev().children('span').css('width','50%');
});
$('.three-quarters').click(function(){
$(this).parent().prev().children('span').css('width','75%');
});
$('.full').click(function(){
$(this).parent().prev().children('span').css('width','100%');
});
});
</script>
[/code]